`tsx
import { Button } from 'apple-liquid-glass-ui';


Click me

`

$3

`html

Click me

`

Both approaches provide the same authentic Apple Glass styling with blur effects, translucency, and smooth animations.

Components

$3

`tsx
import { Button } from 'glass-ui';

Primary
Subtle
Ghost

// Icon button

×

`

Classname API:

`html
Primary
Subtle
Ghost
×
`

$3

`tsx
import { Input, Textarea, InputGroup } from 'glass-ui';


</p><p class="my-3"><InputGroup<br /> label="Email"<br /> hint="We'll never share your email"<br /> error="Invalid email"<br /> required<br />><br /> <Input type="email" error /><br /></InputGroup><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Classname API:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><input class="gl-input gl-input-md" placeholder="Enter text..." /><br /><textarea class="gl-input gl-textarea gl-textarea-md" placeholder="Enter text...">

`tsx
import { Card, CardHeader, CardBody, CardFooter } from 'glass-ui';



Content goes here

Cancel
Save


`

Classname API:

`html


`tsx
import { Sheet } from 'glass-ui';

const [open, setOpen] = useState(false);

setOpen(false)} size="md">
setOpen(false)} />
Content goes here

setOpen(false)}>Cancel
Confirm


`

$3

`tsx
import { Select, Dropdown } from 'glass-ui';

// Native select

Option 1
Option 2


// Custom dropdown
options={[
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
]}
value={value}
onChange={setValue}
size="md"
/>
`

$3

`tsx
import { Checkbox, Radio, Switch } from 'glass-ui';




`

Classname API:

`html



Accept terms





Option 1





Enable notifications

`

$3

Glass-styled calendar date picker with animations:

`tsx
import { DatePicker } from 'apple-liquid-glass-ui';

const [date, setDate] = useState();

// Basic date picker
label="Select Date"
placeholder="Choose a date"
value={date}
onChange={setDate}
size="md"
/>

// With constraints
label="Birth Date"
placeholder="MM/DD/YYYY"
value={birthDate}
onChange={setBirthDate}
maxDate={new Date()}
size="md"
/>

// Different sizes



`

Props:
- value: Selected date (Date object)
- onChange: Callback with selected date
- label: Optional label text
- placeholder: Input placeholder
- minDate: Minimum selectable date
- maxDate: Maximum selectable date
- disabled: Disable picker
- size: 'sm' | 'md' | 'lg'

Features:
- Full calendar view with month/year navigation
- Today button for quick access
- Min/max date constraints
- Glass-styled dropdown with blur effects
- Smooth animations
- Dark mode support

$3

`tsx
import { Badge } from 'glass-ui';

New
Success

`

$3

`tsx
import { Avatar, AvatarGroup } from 'glass-ui';






`

$3

`tsx
import { Heading, Text, Code, Link } from 'glass-ui';

Main Heading
Paragraph text
const foo = 'bar';
Learn more
`

Classname API:

`html


Main Heading

`tsx
import { Tooltip } from 'glass-ui';


Hover me

`

$3

`tsx
import { Container, Stack, Grid, Flex, Divider, Spacer, Center } from 'apple-liquid-glass-ui';



`

Flex Props:
- direction: 'row' | 'column' | 'row-reverse' | 'column-reverse'
- align: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
- justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
- wrap: 'nowrap' | 'wrap' | 'wrap-reverse'
- gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
- inline: Display as inline-flex

Classname API:

`html


`tsx
import { Alert } from 'apple-liquid-glass-ui';

variant="success"
title="Success!"
message="Your changes have been saved."
closable
/>

variant="error"
title="Error"
message="Something went wrong."
/>

variant="warning"
title="Warning"
message="Please review before proceeding."
/>


Simple info alert without title

`

Props:
- variant: 'default' | 'success' | 'error' | 'warning' | 'info'
- title: Optional alert title
- message: Alert message content
- closable: Show close button
- onClose: Callback when closed

$3

Apple-style navigation with glass blur effect:

`tsx
import { GlassTopNav, GlassNavItem, GlassBottomNav } from 'apple-liquid-glass-ui';

// Top Navigation




// Bottom Navigation (shows on mobile <768px)





`

Features:
- Sticky top navigation with blur background
- Mobile bottom navigation that appears on small screens
- Active state styling with accent color
- Compound component pattern for flexible layouts

$3

Range input with glass styling and optional value display:

`tsx
import { Slider } from 'apple-liquid-glass-ui';

const [volume, setVolume] = useState(50);

label="Volume"
value={volume}
onChange={setVolume}
min={0}
max={100}
showValue
size="md"
/>

label="Temperature"
value={temp}
onChange={setTemp}
min={-20}
max={40}
step={0.5}
showValue
unit="°C"
/>
`

Props:
- label: Optional label text
- value: Current value
- onChange: Callback with new value
- min, max, step: Range configuration
- showValue: Display current value
- unit: Optional unit suffix
- size: 'sm' | 'md' | 'lg'

$3

Content organization with default or underline variants:

`tsx
import { Tabs } from 'apple-liquid-glass-ui';

items={[
{ key: 'overview', label: 'Overview', content:

// Underline variant
variant="underline"
items={[...]}
/>
`

Props:
- items: Array of { key, label, content }
- defaultActiveKey: Initial active tab
- onChange: Callback when tab changes
- variant: 'default' | 'underline'

$3

Progress indicators with optional percentage display:

`tsx
import { Progress } from 'apple-liquid-glass-ui';

// Determinate progress


// Indeterminate (loading)


// With label
value={75}
showPercent
label="Upload Progress"
size="lg"
/>

// Variants


`

Props:
- value: Progress value (0-100)
- indeterminate: Show loading animation
- showPercent: Display percentage text
- label: Optional label above progress bar
- variant: 'default' | 'success' | 'error' | 'warning'
- size: 'sm' | 'md' | 'lg'

$3

Loading indicators with optional overlay mode:

`tsx
import { Spinner } from 'apple-liquid-glass-ui';

// Basic spinner


// With label


// Full-page overlay


// Different sizes



`

Props:
- size: 'sm' | 'md' | 'lg'
- label: Optional loading text
- overlay: Full-page overlay mode with glass background

$3

Bootstrap-style loading placeholders with smooth animations:

`tsx
import { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonTable } from 'apple-liquid-glass-ui';

// Basic skeleton





// Animation types
// Default shimmering effect
// Opacity pulsing
// No animation

// Text lines



// Avatar placeholder





// Card with avatar and text



// Table placeholder


`

Skeleton Props:
- variant: 'text' | 'circular' | 'rectangular' | 'rounded'
- width: Width in pixels or percentage
- height: Height in pixels or percentage
- animation: 'wave' | 'pulse' | false

SkeletonText Props:
- lines: Number of lines (default: 3)
- width: Width for all lines except last
- animation: Animation type

SkeletonAvatar Props:
- size: 'sm' | 'md' | 'lg' | 'xl'
- animation: Animation type

SkeletonCard Props:
- avatar: Show avatar (default: true)
- lines: Number of text lines (default: 3)
- animation: Animation type

SkeletonTable Props:
- rows: Number of rows (default: 5)
- columns: Number of columns (default: 4)
- animation: Animation type

$3

Context menus and dropdown menus with glass styling:

`tsx
import { Menu } from 'apple-liquid-glass-ui';

trigger={Actions}
position="bottom"
items={[
{ key: 'edit', label: 'Edit', icon: '✏️', shortcut: '⌘E', onClick: handleEdit },
{ key: 'duplicate', label: 'Duplicate', icon: '📋', onClick: handleDuplicate },
{ type: 'divider' },
{ type: 'label', label: 'Danger Zone' },
{ key: 'delete', label: 'Delete', icon: '🗑️', danger: true, onClick: handleDelete },
{ key: 'disabled', label: 'Disabled Action', disabled: true }
]}
/>
`

Props:
- trigger: Element to click to open menu
- position: 'top' | 'bottom' | 'left' | 'right'
- items: Array of menu items, dividers, or labels

MenuItem Type:
- key: Unique identifier
- label: Display text
- icon: Optional icon element
- shortcut: Optional keyboard shortcut display
- danger: Red text for destructive actions
- disabled: Disable interaction
- onClick: Callback when clicked

$3

Data tables with sorting, hover effects, and glass styling:

`tsx
import { Table } from 'apple-liquid-glass-ui';

// Basic table


// Table with sorting
const [sortColumn, setSortColumn] = useState(null);
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');

// Compact table


Props:
- Table: hover, striped, size ('sm' | 'md' | 'lg')
- Table.Head: sortable, sorted ('asc' | 'desc' | null), onSort, align ('left' | 'center' | 'right')
- Table.Cell: align ('left' | 'center' | 'right')

Features:
- Glassmorphism styling with backdrop blur
- Sortable column headers with arrow indicators
- Hover effect on rows
- Striped rows for better readability
- Three size variants (sm, md, lg)
- Responsive design with horizontal scrolling
- Cell alignment options

Theming

Toggle between light and dark themes:

`tsx
// Toggle theme
const theme = document.documentElement.getAttribute('data-gl-theme');
document.documentElement.setAttribute('data-gl-theme', theme === 'light' ? 'dark' : 'light');
`

CSS Variables

All design tokens are available as CSS variables:

`css
var(--gl-color-bg)
var(--gl-color-surface)
var(--gl-color-border)
var(--gl-color-accent)
var(--gl-radius-lg)
var(--gl-blur-surface)
var(--gl-shadow-soft)
var(--gl-space-md)
var(--gl-font-size-md)
``

See tokens.css for the complete list.

License

MIT