liqgui
Glassmorphism components that actually feel good.
Getting Started
liqgui is a framework-agnostic component library built with vanilla TypeScript. It uses Web Components, so it works with any framework or no framework at all.
Installation
# npm
npm install liqgui
# or use directly via CDN
<script type="module" src="path/to/dist/index.js"></script>
Quick Setup
<!-- 1. Include CSS tokens -->
<link rel="stylesheet" href="liqgui/styles/tokens.css">
<!-- 2. Import components -->
<script type="module">
import 'liqgui';
</script>
<!-- 3. Use components -->
<glass-button variant="primary">Click Me</glass-button>
Theming
Customize the look and feel using CSS custom properties. Set the theme on the root element.
Available CSS Variables
| Variable | Description | Default |
|---|---|---|
--lg-blur |
Backdrop blur amount | 20px |
--lg-radius |
Border radius | 20px |
--lg-bg |
Background color | rgba(18, 18, 22, 0.65) |
--lg-accent |
Accent gradient | Blue gradient |
Button
Versatile button component with multiple variants, loading states, and spring-based press animations.
<glass-button>Default</glass-button>
<glass-button variant="primary">Primary</glass-button>
<glass-button loading>Loading</glass-button>
Card
Glassmorphism card with optional 3D tilt effect on hover and glow animation.
With Glow
Hover to see the glow effect and 3D tilt.
No Tilt
Static card without tilt effect.
<glass-card glow>Content</glass-card>
<glass-card no-tilt>Static content</glass-card>
Input
Styled text input with focus glow and error state support.
<glass-input placeholder="Enter text"></glass-input>
<glass-input error>
<span slot="error">Error message</span>
</glass-input>
Toggle
Switch toggle with spring-animated thumb movement.
<glass-toggle checked>Label</glass-toggle>
Slider
Range slider with touch support, keyboard navigation, and spring physics.
<glass-slider value="50" min="0" max="100"></glass-slider>
Dropdown
Select dropdown with keyboard navigation and animated menu.
<glass-dropdown>
<span slot="trigger">Select</span>
<button role="option">Option 1</button>
<button role="option">Option 2</button>
</glass-dropdown>
Tabs
Tab navigation with spring-animated sliding indicator.
<glass-tabs>
<button data-value="tab1">Tab 1</button>
<button data-value="tab2">Tab 2</button>
</glass-tabs>
Modal
Dialog modal with animated entrance/exit, backdrop blur, and focus trapping.
<glass-modal id="my-modal">
<h2>Modal Title</h2>
<p>Modal content...</p>
</glass-modal>
// Open programmatically
document.getElementById('my-modal').open();
Toast
Notification toasts with variants, auto-dismiss, and progress indicator.
import { GlassToast } from 'liqgui';
GlassToast.show('Message', 'success');
GlassToast.show('Message', 'error');
Tooltip & Popover
Hover tooltips and click-triggered popovers with 4 position options.
Rich content inside a popover.
Progress
Linear and circular progress indicators with indeterminate mode.
Avatar
User avatars with sizes, status indicators, and grouping.
Badge
Labels, tags, and notification count indicators.
Accordion
Collapsible content sections with spring-animated expand/collapse.