CLI
Add Liquid Glass components to any Next.js + Tailwind project
Copy source into your app with the Intelli UI CLI. Components are fetched from ui.intellihelper.in.
Initialize
Create components.json in your project
npx @intellihelper/cli@latest initAdd components
Install one or more components (utils are added automatically)
npx @intellihelper/cli@latest add button card tabsInteractive add
Pick components from a list when you omit names
npx @intellihelper/cli@latest addList available
See all registry components and what is installed
npx @intellihelper/cli@latest listUpdate
Pull registry updates; prompts before overwriting local edits
npx @intellihelper/cli@latest updateLiquid Glass
Apple-style chrome layer floating over expressive content — toggle light/dark to see adaptive glass
Friends
Mix
Get Up
Mix
All Of Me
Nao
Content layer (saturated) + chrome layer (neutral glass) — icons adapt in light/dark
Card, Tabs & Table
Chrome-layer surfaces with premium motion — rise-in cards, sliding tab indicator, staggered table rows
Chrome Card
Neutral frosted glass panel for functional content.
Chrome layer surfaces adapt to light and dark mode with readable contrast.
Content Card
Expressive saturated surface with white display type.
Use on gradient backgrounds beneath floating chrome controls.
Overview
Glass capsule tabs with a sliding chrome indicator.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Credit Card | $250.00 |
| INV-002 | Pending | PayPal | $150.00 |
| INV-003 | Unpaid | Bank Transfer | $350.00 |
| INV-004 | Paid | Credit Card | $450.00 |
Themes
Start with Mono Basic for black & white, or pick a glass palette
Variants
Chrome layer (outline, secondary, ghost) + content layer (default, destructive) on glass
Buttons on expressive content — chrome variants stay neutral, filled variants use saturated glass
Shapes
Rounded, pill, and rectangular geometry