A Vue 3 component library with the iOS 26 Liquid Glass aesthetic.
Layered blur, tinted glass, soft specular highlights, spring micro-interactions rendered as 22 production-ready Vue 3 components.
- 22 components across 7 categories: buttons, forms, display, overlays, navigation, media, and input.
- Authentic iOS 26 Liquid Glass treatment backdrop blur + saturation, top inner highlight, soft inset shadow, specular sheen overlay, accent halo glow.
- Vue 3 SFCs with
<script setup lang="ts">full type inference, v-model, slots, emits. - Light & dark themes out of the box with a single
data-themeattribute. - Themeable every glass, accent, blur, and radius value is a CSS custom property you can override at runtime.
- Tree-shakable named ESM exports; pay only for what you use.
- Zero runtime deps beyond Vue itself.
npm install @kodlyft/liquid-ui
# or: pnpm add @kodlyft/liquid-ui / yarn add @kodlyft/liquid-uiPeer dep: Vue 3.3+.
// main.ts
import { createApp } from 'vue'
import LiquidUI from '@kodlyft/liquid-ui'
import '@kodlyft/liquid-ui/style.css'
import App from './App.vue'
createApp(App).use(LiquidUI).mount('#app')Or import components individually for better tree-shaking:
<script setup lang="ts">
import { LiquidButton, LiquidToggle } from '@kodlyft/liquid-ui'
import 'liquid-ui/style.css'
import { ref } from 'vue'
const wifi = ref(true)
</script>
<template>
<LiquidButton variant="primary" icon="play">Play</LiquidButton>
<LiquidToggle v-model="wifi" color="green" />
</template>| Category | Components |
|---|---|
| Actions | LiquidButton, LiquidIconButton |
| Forms | LiquidToggle, LiquidSegmented, LiquidSlider, LiquidStepper, LiquidInput, LiquidSearchBar |
| Display | LiquidCard, LiquidBadge, LiquidAvatar, LiquidListRow, LiquidProgress, LiquidSpinner |
| Overlays | LiquidModal, LiquidContextMenu, LiquidToast, LiquidNotification, LiquidPopover |
| Navigation | LiquidTabBar |
| Media | LiquidAudioPlayer |
| Input | LiquidKeyboard |
Toggle dark / light with a single attribute on <html>:
<html data-theme="dark">
<!-- or "light" -->
</html>Override any token at the root of your app:
:root {
--accent: #bf5af2; /* purple */
--glass-blur: 32px;
--glass-opacity: 1.1;
--radius-scale: 1.1;
}<script setup lang="ts">
import { ref } from 'vue'
import { LiquidButton, LiquidModal } from '@kodlyft/liquid-ui'
const open = ref(false)
const onConfirm = () => console.log('confirmed!')
</script>
<template>
<LiquidButton variant="destructive" @click="open = true">
Delete account
</LiquidButton>
<LiquidModal
v-model="open"
title="Delete account?"
message="This action cannot be undone."
confirm-text="Delete"
destructive
icon="trash"
@confirm="onConfirm"
/>
</template># Install
npm install
# Start dev server (showcase)
npm run dev
# Run tests
npm test
npm run test:watch
# Lint & format
npm run lint
npm run format
# Type-check
npm run typecheck
# Build the library
npm run build.
├── src/
│ ├── components/ Vue 3 SFCs (one folder per category)
│ ├── styles/ Per-component CSS files
│ ├── icons.ts SF Symbols-style icon registry
│ ├── style.css Public stylesheet entry
│ └── index.ts Named exports + install plugin
├── Liquid UI.html Standalone showcase (uses CDN Vue)
├── .github/workflows/ CI + release automation
├── vite.config.ts Library build config
├── vitest.config.ts Test config
├── release.config.cjs semantic-release
├── commitlint.config.cjs Conventional commits
└── lint-staged.config.cjs Pre-commit hooks
We use conventional commits, commitlint, and lint-staged with a husky pre-commit hook. Read CONTRIBUTING.md before opening a PR.
PRs and commit messages must follow the Conventional Commits spec:
feat(button): add tinted variant
fix(toggle): correct thumb travel on small size
docs(README): clarify install steps
Releases are fully automated by semantic-release:
- PR merges to
maintrigger.github/workflows/release.yml. - Conventional commits are analyzed to determine the next version.
- The package is built, tested, type-checked, and published to npm with provenance.
- A GitHub release is created with auto-generated notes.
CHANGELOG.mdandpackage.jsonversion are committed back tomain.
Pre-releases ship from next and beta branches.
MIT © Liquid UI Contributors
Inspired by Apple's iOS 26 Liquid Glass language. Not affiliated with or endorsed by Apple.