# liquefy-ui — full reference

> Generated from source. Types are the real exported declarations, tokens are the
> real values in the shipped stylesheet, and only names exported from the package
> entry point are listed as importable.

```bash
pnpm add @liquefy-ui/react @liquefy-ui/core @liquefy-ui/icons
```

```tsx
import { LiquefyProvider, LiquidButton } from '@liquefy-ui/react'
import '@liquefy-ui/react/styles.css'
// Using Tailwind v4? Import '@liquefy-ui/react/tailwind.css' instead, before
// 'tailwindcss', and the bridged tokens plus the correct layer order come with it.

export function App() {
  return (
    <LiquefyProvider theme="system" tint="#8f8f8f">
      <LiquidButton>Create magic</LiquidButton>
    </LiquefyProvider>
  )
}
```

Or copy the source into your own repo with the shadcn CLI. The namespace is
registered in shadcn's registry directory, so it resolves with nothing added to
`components.json`:

```bash
npx shadcn@latest add @liquefy-ui/liquid-button
```

The `https://liquefy-ui.com/r/<name>.json` URL that namespace resolves to still works, and
is what a CLI too old to know the directory needs.

Rules an agent should not have to guess:

- Every component is a client component. The npm bundles carry a `'use client'`
  banner and so does every file in the registry, so importing from a Next.js
  server component is fine. Only your own handlers need a directive of their own.
- `LiquefyProvider` is required. Components read tint, spacing, motion and WebGL
  settings from it. A nested provider does **not** inherit from the one above it:
  unset props fall back to the library defaults, so name what you want to keep.
- There is no `variant="primary"` on `LiquidButton`. Buttons vary by `size`,
  `tint`, `isLoading`, `lens` and `webgl`. `variant` exists on `LiquidSurface`
  (`'clear' | 'tinted'`) and `LiquidChip`.
- Every component accepts a `styles` prop: CSS properties plus the `p`/`px`/`mt`/
  `w`/`h`/`size`/`bg`/`radius` shorthands on the `--lq-space` scale, `$token`
  references, responsive objects like `{ base: 1, md: 3 }`, and state keys such as
  `_hover`, `_focusVisible`, `_disabled`, `_dark`. There is no `styled()` and no
  `sx` prop.
- Everything is imported from the package root. There are no deep entry points,
  and names not listed below — `compileLiquidStyles`, `useLiquefyPortalContainer`,
  the internal glyphs — are not exported from it.
- Overlays (Dialog, Drawer, Menu, Select, Tooltip) are built on Base UI and render
  into a portal inside the provider. Focus handling, Escape and collision-aware
  placement are already done; do not re-implement them.
- Accordion headers are in the normal tab order rather than a roving composite,
  which is what WAI-ARIA specifies. Arrow keys do not move between them.
- The library does not read `prefers-reduced-motion` or
  `prefers-reduced-transparency` itself. Map them to the `motion` and
  `transparency` props if the product wants that.

## Components

### GlassCard

A content card with eyebrow, title, description, body and footer slots on the liquid surface.

Import: `import { GlassCard } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/glass-card.md
Docs: https://liquefy-ui.com/#/components/card
Registry: `npx shadcn@latest add @liquefy-ui/glass-card`

```ts
export type GlassCardProps = Omit<LiquidSurfaceProps, 'children' | 'title'> & {
  children: ReactNode
  description?: ReactNode
  eyebrow?: ReactNode
  footer?: ReactNode
  title?: ReactNode
}
```

### GlassDock, DockItem

A macOS-style dock: a glass rail of icon buttons that magnify under the pointer.

Import: `import { GlassDock, DockItem } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/glass-dock.md
Docs: https://liquefy-ui.com/#/components/dock
Registry: `npx shadcn@latest add @liquefy-ui/glass-dock`

```ts
export type GlassDockProps = HTMLAttributes<HTMLElement> & LiquidStyleProps & {
  children: ReactNode
  label?: string
  position?: 'inline' | 'floating'
}

export type DockItemProps = ButtonHTMLAttributes<HTMLButtonElement> & LiquidStyleProps & {
  active?: boolean
  icon: ReactNode
  label: string
}
```

### LiquidAccordion, LiquidAccordionItem

Stacked disclosure panels with real headings and a height-measured open animation.

Import: `import { LiquidAccordion, LiquidAccordionItem } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-accordion.md
Docs: https://liquefy-ui.com/#/components/accordion
Registry: `npx shadcn@latest add @liquefy-ui/liquid-accordion`

```ts
export type LiquidAccordionProps = Omit<LiquidSurfaceProps, 'children' | 'defaultValue'> & {
  children: ReactNode
  defaultValue?: string[]
  multiple?: boolean
  onValueChange?: (value: string[]) => void
  value?: string[]
}

export type LiquidAccordionItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & LiquidStyleProps & {
  children: ReactNode
  subtitle?: ReactNode
  title: ReactNode
  value: string
}
```

### LiquidAlert

An inline status message in four severities, with an optional dismiss button.

Import: `import { LiquidAlert } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-alert.md
Docs: https://liquefy-ui.com/#/components/alert
Registry: `npx shadcn@latest add @liquefy-ui/liquid-alert`

```ts
export type LiquidAlertSeverity = 'info' | 'success' | 'warning' | 'danger'

export type LiquidAlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & LiquidStyleProps & {
  action?: ReactNode
  children: ReactNode
  closeLabel?: string
  icon?: ReactNode
  onClose?: () => void
  severity?: LiquidAlertSeverity
  title?: ReactNode
}
```

### LiquidAvatar, LiquidAvatarGroup

A circular avatar with image, initials and status dot, plus an overlapping group.

Import: `import { LiquidAvatar, LiquidAvatarGroup } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-avatar.md
Docs: https://liquefy-ui.com/#/components/avatar
Registry: `npx shadcn@latest add @liquefy-ui/liquid-avatar`

```ts
export type LiquidAvatarProps = HTMLAttributes<HTMLSpanElement> & LiquidStyleProps & {
  alt?: string
  fallback?: ReactNode
  name?: string
  size?: 'sm' | 'md' | 'lg' | 'xl'
  src?: string
  tint?: string
}

export type LiquidAvatarGroupProps = HTMLAttributes<HTMLSpanElement> & LiquidStyleProps & {
  children: ReactNode
  max?: number
  size?: LiquidAvatarProps['size']
  total?: number
}
```

### LiquidBadge

A small count or status pill for hanging off icons and labels.

Import: `import { LiquidBadge } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-badge.md
Docs: https://liquefy-ui.com/#/components/badge
Registry: `npx shadcn@latest add @liquefy-ui/liquid-badge`

```ts
export type LiquidBadgeProps = HTMLAttributes<HTMLSpanElement> & LiquidStyleProps & {
  children?: ReactNode
  count?: number
  dot?: boolean
  max?: number
  showZero?: boolean
  tint?: string
}
```

### LiquidBreadcrumbs

A trail of links with glyph separators and a current-page marker.

Import: `import { LiquidBreadcrumbs } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-breadcrumbs.md
Docs: https://liquefy-ui.com/#/components/breadcrumbs
Registry: `npx shadcn@latest add @liquefy-ui/liquid-breadcrumbs`

```ts
export type LiquidBreadcrumbItem = {
  href?: string
  icon?: ReactNode
  label: ReactNode
  onClick?: () => void
}

export type LiquidBreadcrumbsProps = HTMLAttributes<HTMLElement> & LiquidStyleProps & {
  items: LiquidBreadcrumbItem[]
  label?: string
  separator?: ReactNode
}
```

### LiquidButton

The primary action control: WebGL rim light, jelly press spring and a loading state.

Import: `import { LiquidButton } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-button.md
Docs: https://liquefy-ui.com/#/components/button
Registry: `npx shadcn@latest add @liquefy-ui/liquid-button`

```ts
export type LiquidButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & LiquidStyleProps & {
  children: ReactNode
  iconAfter?: ReactNode
  iconBefore?: ReactNode
  isLoading?: boolean
  lens?: boolean
  size?: 'sm' | 'md' | 'lg'
  tint?: string
  webgl?: boolean
}
```

### LiquidCheckbox

A checkbox with a springy tick, indeterminate state and label support.

Import: `import { LiquidCheckbox } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-checkbox.md
Docs: https://liquefy-ui.com/#/components/checkbox
Registry: `npx shadcn@latest add @liquefy-ui/liquid-checkbox`

```ts
export type LiquidCheckboxProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & LiquidStyleProps & {
  checked?: boolean
  defaultChecked?: boolean
  hint?: string
  indeterminate?: boolean
  label?: ReactNode
  onCheckedChange?: (checked: boolean) => void
}
```

### LiquidChip

A compact tag that can be selected, tinted and dismissed.

Import: `import { LiquidChip } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-chip.md
Docs: https://liquefy-ui.com/#/components/chip
Registry: `npx shadcn@latest add @liquefy-ui/liquid-chip`

```ts
export type LiquidChipProps = HTMLAttributes<HTMLSpanElement> & LiquidStyleProps & {
  children: ReactNode
  deleteLabel?: string
  icon?: ReactNode
  onDelete?: () => void
  selected?: boolean
  size?: 'sm' | 'md'
  tint?: string
  variant?: 'clear' | 'tinted'
}
```

### LiquidDialog

A modal on Base UI: trapped focus, inert background and wired-up title and description.

Import: `import { LiquidDialog } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-dialog.md
Docs: https://liquefy-ui.com/#/components/dialog
Registry: `npx shadcn@latest add @liquefy-ui/liquid-dialog`

```ts
export type LiquidDialogProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & LiquidStyleProps & {
  children: ReactNode
  closeLabel?: string
  description?: ReactNode
  onOpenChange: (open: boolean) => void
  open: boolean
  title: ReactNode
}
```

### LiquidDivider

A hairline rule, horizontal or vertical, with optional inline content.

Import: `import { LiquidDivider } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-divider.md
Docs: https://liquefy-ui.com/#/components/divider
Registry: `npx shadcn@latest add @liquefy-ui/liquid-divider`

```ts
export type LiquidDividerProps = HTMLAttributes<HTMLDivElement> & LiquidStyleProps & {
  children?: ReactNode
  orientation?: 'horizontal' | 'vertical'
}
```

### LiquidDrawer

A side panel that slides from the left, right or bottom edge, on Base UI Dialog.

Import: `import { LiquidDrawer } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-drawer.md
Docs: https://liquefy-ui.com/#/components/drawer
Registry: `npx shadcn@latest add @liquefy-ui/liquid-drawer`

```ts
export type LiquidDrawerProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & LiquidStyleProps & {
  children: ReactNode
  closeLabel?: string
  onOpenChange: (open: boolean) => void
  open: boolean
  side?: 'left' | 'right' | 'bottom'
  /** Flick the panel towards its own edge to dismiss it. Touch and pen only. */
  swipeToClose?: boolean
  title?: ReactNode
}
```

### LiquidIconButton

A square icon-only button that takes its accessible name from a label prop.

Import: `import { LiquidIconButton } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-icon-button.md
Docs: https://liquefy-ui.com/#/components/icon-button
Registry: `npx shadcn@latest add @liquefy-ui/liquid-icon-button`

```ts
export type LiquidIconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & LiquidStyleProps & {
  children: ReactNode
  label: string
  shape?: 'circle' | 'rounded'
  size?: 'sm' | 'md' | 'lg'
  tint?: string
}
```

### LiquidList, LiquidListItem, LiquidListSubheader

A glass list with items, descriptions, leading icons, trailing slots and subheaders.

Import: `import { LiquidList, LiquidListItem, LiquidListSubheader } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-list.md
Docs: https://liquefy-ui.com/#/components/list
Registry: `npx shadcn@latest add @liquefy-ui/liquid-list`

```ts
export type LiquidListProps = Omit<LiquidSurfaceProps, 'children'> & {
  children: ReactNode
  inset?: boolean
}

export type LiquidListItemProps = LiHTMLAttributes<HTMLLIElement> & LiquidStyleProps & {
  children: ReactNode
  chevron?: boolean
  description?: ReactNode
  end?: ReactNode
  icon?: ReactNode
  onActivate?: () => void
}

export type LiquidListSubheaderProps = HTMLAttributes<HTMLLIElement> & LiquidStyleProps
```

### LiquidMenu

A dropdown action menu on Base UI: arrow keys, typeahead and collision-aware placement.

Import: `import { LiquidMenu } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-menu.md
Docs: https://liquefy-ui.com/#/components/menu
Registry: `npx shadcn@latest add @liquefy-ui/liquid-menu`

```ts
export type LiquidMenuItemDef = {
  danger?: boolean
  disabled?: boolean
  icon?: ReactNode
  label: ReactNode
  onSelect?: () => void
  shortcut?: string
  type?: 'item'
} | {
  type: 'separator'
}

export type LiquidMenuProps = LiquidStyleProps & {
  align?: 'start' | 'end'
  className?: string
  items: LiquidMenuItemDef[]
  style?: CSSProperties
  trigger: ReactElement<Record<string, unknown>>
}
```

### LiquidPagination

A page strip with ellipsis truncation and previous/next controls.

Import: `import { LiquidPagination } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-pagination.md
Docs: https://liquefy-ui.com/#/components/pagination
Registry: `npx shadcn@latest add @liquefy-ui/liquid-pagination`

```ts
export type LiquidPaginationProps = Omit<HTMLAttributes<HTMLElement>, 'onChange'> & LiquidStyleProps & {
  count: number
  defaultPage?: number
  label?: string
  onPageChange?: (page: number) => void
  page?: number
  siblingCount?: number
}
```

### LiquidProgress, LiquidSpinner

A determinate progress bar and an indeterminate spinner sharing one accent.

Import: `import { LiquidProgress, LiquidSpinner } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-progress.md
Docs: https://liquefy-ui.com/#/components/progress
Registry: `npx shadcn@latest add @liquefy-ui/liquid-progress`

```ts
export type LiquidProgressProps = HTMLAttributes<HTMLDivElement> & LiquidStyleProps & {
  label?: string
  max?: number
  showValue?: boolean
  tint?: string
  value?: number
}

export type LiquidSpinnerProps = HTMLAttributes<HTMLSpanElement> & LiquidStyleProps & {
  label?: string
  size?: number
  thickness?: number
  tint?: string
  value?: number
}
```

### LiquidRadioGroup, LiquidRadio

A radio group with a springy dot and keyboard-driven selection.

Import: `import { LiquidRadioGroup, LiquidRadio } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-radio.md
Docs: https://liquefy-ui.com/#/components/radio-group
Registry: `npx shadcn@latest add @liquefy-ui/liquid-radio`

```ts
export type LiquidRadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> & LiquidStyleProps & {
  children: ReactNode
  defaultValue?: string
  disabled?: boolean
  label?: string
  name?: string
  onValueChange?: (value: string) => void
  orientation?: 'horizontal' | 'vertical'
  value?: string
}

export type LiquidRadioProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & LiquidStyleProps & {
  hint?: string
  label?: ReactNode
  value: string
}
```

### LiquidRating

A star rating that reads and writes a numeric value.

Import: `import { LiquidRating } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-rating.md
Docs: https://liquefy-ui.com/#/components/rating
Registry: `npx shadcn@latest add @liquefy-ui/liquid-rating`

```ts
export type LiquidRatingProps = Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> & LiquidStyleProps & {
  defaultValue?: number
  label?: string
  max?: number
  onValueChange?: (value: number) => void
  readOnly?: boolean
  size?: 'sm' | 'md' | 'lg'
  value?: number
}
```

### LiquidSegmented

A segmented control whose glass indicator slides between options.

Import: `import { LiquidSegmented } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-segmented.md
Docs: https://liquefy-ui.com/#/components/segmented-control
Registry: `npx shadcn@latest add @liquefy-ui/liquid-segmented`

```ts
export type LiquidSegmentedOption = {
  disabled?: boolean
  icon?: ReactNode
  label: ReactNode
  value: string
}

export type LiquidSegmentedProps = Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> & LiquidStyleProps & {
  defaultValue?: string
  label?: string
  onValueChange?: (value: string) => void
  options: LiquidSegmentedOption[]
  size?: 'sm' | 'md'
  value?: string
}
```

### LiquidSelect

A listbox dropdown on Base UI: typeahead, focus return and a glass popover.

Import: `import { LiquidSelect } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-select.md
Docs: https://liquefy-ui.com/#/components/select
Registry: `npx shadcn@latest add @liquefy-ui/liquid-select`

```ts
export type LiquidSelectOption = {
  disabled?: boolean
  label: ReactNode
  value: string
}

export type LiquidSelectProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value'> & LiquidStyleProps & {
  defaultValue?: string
  hint?: string
  label?: string
  /** Called when the popup opens or closes — a sheet holding the select needs to know. */
  onOpenChange?: (open: boolean) => void
  onValueChange?: (value: string) => void
  options: LiquidSelectOption[]
  placeholder?: string
  value?: string
}
```

### LiquidSkeleton

A shimmering placeholder block for content that has not arrived.

Import: `import { LiquidSkeleton } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-skeleton.md
Docs: https://liquefy-ui.com/#/components/skeleton
Registry: `npx shadcn@latest add @liquefy-ui/liquid-skeleton`

```ts
export type LiquidSkeletonProps = HTMLAttributes<HTMLSpanElement> & LiquidStyleProps & {
  height?: number | string
  radius?: number | string
  variant?: 'text' | 'circular' | 'rectangular'
  width?: number | string
}
```

### LiquidSlider

A range input with a luminous track and a dimensional thumb.

Import: `import { LiquidSlider } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-slider.md
Docs: https://liquefy-ui.com/#/components/slider
Registry: `npx shadcn@latest add @liquefy-ui/liquid-slider`

```ts
export type LiquidSliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & LiquidStyleProps & {
  endAdornment?: ReactNode
  label?: string
  startAdornment?: ReactNode
}
```

### LiquidSurface

The base material every glass component is built on: rim light, refraction and springs.

Import: `import { LiquidSurface } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-surface.md
Docs: https://liquefy-ui.com/#/components/surface
Registry: `npx shadcn@latest add @liquefy-ui/liquid-surface`

```ts
export type LiquidSurfaceProps = HTMLAttributes<HTMLDivElement> & LiquidStyleProps & {
  children?: ReactNode
  intensity?: number
  interactive?: boolean
  lens?: boolean
  /** How far the lens softens what it refracts, in pixels. */
  lensBlur?: number
  radius?: number | string
  tint?: string
  variant?: LiquidVariant
  webgl?: boolean
}
```

### LiquidSwitch

A toggle whose thumb squashes as it travels.

Import: `import { LiquidSwitch } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-switch.md
Docs: https://liquefy-ui.com/#/components/switch
Registry: `npx shadcn@latest add @liquefy-ui/liquid-switch`

```ts
export type LiquidSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & LiquidStyleProps & {
  checked?: boolean
  defaultChecked?: boolean
  label: string
  onCheckedChange?: (checked: boolean) => void
}
```

### LiquidTableContainer, LiquidTable, LiquidTableHead, LiquidTableBody, LiquidTableRow, LiquidTableCell, LiquidTableHeaderCell

A composable data table on a glass container, with row hover and selection.

Import: `import { LiquidTableContainer, LiquidTable, LiquidTableHead, LiquidTableBody, LiquidTableRow, LiquidTableCell, LiquidTableHeaderCell } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-table.md
Docs: https://liquefy-ui.com/#/components/table
Registry: `npx shadcn@latest add @liquefy-ui/liquid-table`

```ts
export type LiquidTableContainerProps = Omit<LiquidSurfaceProps, 'children'> & {
  children: React.ReactNode
}

export type LiquidTableProps = TableHTMLAttributes<HTMLTableElement> & LiquidStyleProps & {
  hover?: boolean
  size?: 'sm' | 'md'
}

export type LiquidTableRowProps = HTMLAttributes<HTMLTableRowElement> & LiquidStyleProps & {
  selected?: boolean
}

export type LiquidTableCellProps = TdHTMLAttributes<HTMLTableCellElement> & LiquidStyleProps & {
  align?: 'left' | 'center' | 'right'
}

export type LiquidTableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement> & LiquidStyleProps & {
  align?: 'left' | 'center' | 'right'
}
```

### LiquidTabs, LiquidTabList, LiquidTab, LiquidTabPanel

Composable tabs on Base UI, with a glowing underline that springs between them.

Import: `import { LiquidTabs, LiquidTabList, LiquidTab, LiquidTabPanel } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-tabs.md
Docs: https://liquefy-ui.com/#/components/tabs
Registry: `npx shadcn@latest add @liquefy-ui/liquid-tabs`

```ts
export type LiquidTabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> & LiquidStyleProps & {
  children: ReactNode
  defaultValue?: string
  onValueChange?: (value: string) => void
  value?: string
}

export type LiquidTabListProps = HTMLAttributes<HTMLDivElement> & LiquidStyleProps & {
  children: ReactNode
  label?: string
}

export type LiquidTabProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & LiquidStyleProps & {
  children: ReactNode
  icon?: ReactNode
  value: string
}

export type LiquidTabPanelProps = HTMLAttributes<HTMLDivElement> & LiquidStyleProps & {
  children: ReactNode
  value: string
}
```

### LiquidTextField

A single-line text input with label, hint and invalid state.

Import: `import { LiquidTextField } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-text-field.md
Docs: https://liquefy-ui.com/#/components/text-field
Registry: `npx shadcn@latest add @liquefy-ui/liquid-text-field`

```ts
export type LiquidTextFieldProps = InputHTMLAttributes<HTMLInputElement> & LiquidStyleProps & {
  endAdornment?: ReactNode
  hint?: string
  label?: string
  startAdornment?: ReactNode
}
```

### LiquidTextArea

A multi-line text input that keeps the field styling of LiquidTextField.

Import: `import { LiquidTextArea } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-textarea.md
Docs: https://liquefy-ui.com/#/components/text-area
Registry: `npx shadcn@latest add @liquefy-ui/liquid-textarea`

```ts
export type LiquidTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & LiquidStyleProps & {
  hint?: string
  label?: string
}
```

### LiquidToastProvider, useLiquidToast

A toast provider and a useLiquidToast hook for transient messages.

Import: `import { LiquidToastProvider, useLiquidToast } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-toast.md
Docs: https://liquefy-ui.com/#/components/toast
Registry: `npx shadcn@latest add @liquefy-ui/liquid-toast`

```ts
export type LiquidToastOptions = {
  description?: ReactNode
  duration?: number
  severity?: LiquidAlertSeverity
  title: ReactNode
}

export type LiquidToastProviderProps = {
  children: ReactNode
  placement?: 'bottom-right' | 'bottom-center' | 'top-right' | 'top-center'
}
```

### LiquidTooltip

A glass bubble on hover and focus, positioned by Base UI so it stays on screen.

Import: `import { LiquidTooltip } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/liquid-tooltip.md
Docs: https://liquefy-ui.com/#/components/tooltip
Registry: `npx shadcn@latest add @liquefy-ui/liquid-tooltip`

```ts
export type LiquidTooltipProps = LiquidStyleProps & {
  children: ReactElement<Record<string, unknown>>
  className?: string
  content: ReactNode
  delay?: number
  placement?: 'top' | 'bottom' | 'left' | 'right'
  style?: CSSProperties
}
```

## Provider and internals

### internal-glyphs

The small inline SVG glyphs the components draw for chevrons, checks and status icons.

Internal: not exported from `@liquefy-ui/react`; available as copied source.
Page: https://liquefy-ui.com/llms/internal-glyphs.md
Docs: https://liquefy-ui.com/#/components
Registry: `npx shadcn@latest add @liquefy-ui/internal-glyphs`

### defaultBreakpoints, LiquefyProvider, useLiquefyConfig

LiquefyProvider and the config hooks every component reads its tokens from.

Import: `import { defaultBreakpoints, LiquefyProvider, useLiquefyConfig } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/provider.md
Docs: https://liquefy-ui.com/#/components
Registry: `npx shadcn@latest add @liquefy-ui/provider`

```ts
export type LiquefyConfig = {
  /** Minimum widths behind the responsive form of the `styles` prop. */
  breakpoints: LiquefyBreakpoints
  intensity: number
  lens: boolean
  motion: boolean
  /** One spacing unit. `styles={{ p: 3 }}` resolves to three of these. */
  spacing: number | string
  theme: LiquefyTheme
  tint: string
  transparency: boolean
  webgl: boolean
  wobbliness: number
}

export type LiquefyBreakpoint = 'lg' | 'md' | 'sm' | 'xl'

export type LiquefyBreakpoints = Record<LiquefyBreakpoint, number | string>

export type LiquefyTheme = 'dark' | 'light' | 'system'

export type LiquefyProviderProps = Partial<Omit<LiquefyConfig, 'breakpoints'>> & {
  breakpoints?: Partial<LiquefyBreakpoints>
  children: ReactNode
  className?: string
}
```

### getLiquefyStyleSheet, useLiquidStyles

The `styles` prop engine: shorthands, token references, breakpoints and state selectors.

Import: `import { getLiquefyStyleSheet, useLiquidStyles } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/styles-prop.md
Docs: https://liquefy-ui.com/#/components
Registry: `npx shadcn@latest add @liquefy-ui/styles-prop`

```ts
export type LiquidResponsive<T> = T | ({ base?: T } & Partial<Record<LiquefyBreakpoint, T>>)

export type LiquidStyleState =
  | '_active'
  | '_checked'
  | '_dark'
  | '_disabled'
  | '_even'
  | '_expanded'
  | '_first'
  | '_focus'
  | '_focusVisible'
  | '_hover'
  | '_invalid'
  | '_last'
  | '_light'
  | '_odd'
  | '_open'
  | '_placeholder'
  | '_readOnly'
  | '_selected'

export type LiquidStyles = StandardStyles & CustomPropertyStyles & ShorthandStyles & ConditionalStyles

export type LiquidStyleProps = {
  /**
   * Token-aware style overrides applied to the component root. Static values
   * become inline styles; responsive and stateful values become a generated
   * class that sits outside the `liquefy-ui` cascade layer, so it always wins
   * over the stylesheet without needing `!important`.
   */
  styles?: LiquidStyles
}

export type LiquidCustomProperties = CSSProperties & Record<`--${string}`, number | string>
```

### useLiquidGlass

The hook that wires an element to the WebGL renderer and the motion springs.

Import: `import { useLiquidGlass } from '@liquefy-ui/react'`
Page: https://liquefy-ui.com/llms/use-liquid-glass.md
Docs: https://liquefy-ui.com/#/components
Registry: `npx shadcn@latest add @liquefy-ui/use-liquid-glass`

```ts
export type LiquidGlassOptions = LiquidMotionOptions & {
  lens?: boolean
  lensBlur?: number
  lensStrength?: number
  motion?: boolean
}
```

## Icons

`AlertTriangleIcon`, `ArrowRightIcon`, `BellIcon`, `CalendarIcon`, `CheckIcon`, `ChevronDownIcon`, `ChevronLeftIcon`, `ChevronRightIcon`, `ChevronUpIcon`, `CircleAlertIcon`, `CircleCheckIcon`, `ClockIcon`, `CommandIcon`, `ComponentsIcon`, `CopyIcon`, `DownloadIcon`, `EyeIcon`, `EyeOffIcon`, `FilterIcon`, `FolderIcon`, `GithubIcon`, `HeartIcon`, `HomeIcon`, `ImageIcon`, `InfoIcon`, `LinkIcon`, `LockIcon`, `MailIcon`, `MinusIcon`, `MoonIcon`, `MoreHorizontalIcon`, `PauseIcon`, `PlayIcon`, `PlusIcon`, `SearchIcon`, `SettingsIcon`, `ShareIcon`, `SparklesIcon`, `StarIcon`, `SunIcon`, `TrashIcon`, `UploadIcon`, `UserIcon`, `XIcon`

```ts
export type IconProps = SVGProps<SVGSVGElement> & {
  size?: number | string
  strokeWidth?: number
}
```

## Engine: @liquefy-ui/core

Values: `LiquidRenderer`, `SpringValue`, `attachLiquidLens`, `attachLiquidMotion`, `clamp`, `createLensMap`, `defaultTokens`, `hexToRgb`, `isLensRenderingSupported`, `isLensSupported`, `lerp`, `mapRange`

Types: `LensFilterController`, `LensFilterOptions`, `LensMap`, `LensMapOptions`, `LiquefyTokens`, `LiquidMotionController`, `LiquidMotionOptions`, `LiquidRendererOptions`, `LiquidVariant`, `SpringOptions`

## Design tokens

### Global

```css
--lq-accent: #8eb9ff;
--lq-space: 4px;
--lq-radius-default: 18px;
--lq-duration: 420ms;
--lq-easing: cubic-bezier(0.22, 1, 0.36, 1);
--lq-text: #f8faff;
--lq-muted: rgba(242, 246, 255, 0.66);
```

### Dark theme

```css
--lq-clear-fill: transparent;
--lq-clear-line: rgba(255, 255, 255, 0.15);
--lq-control-fill: transparent;
--lq-control-line: rgba(255, 255, 255, 0.16);
--lq-control-hover-line: color-mix(in srgb, var(--lq-button-tint, var(--lq-accent)) 28%, rgba(255, 255, 255, 0.18));
--lq-dock-active: #fff;
--lq-dock-hover-fill: rgba(255, 255, 255, 0.012);
--lq-dock-indicator-fill: transparent;
--lq-field-fill: transparent;
--lq-field-focus-fill: color-mix(in srgb, var(--lq-accent) 2%, transparent);
--lq-field-line: rgba(255, 255, 255, 0.13);
--lq-foreground: #f8faff;
--lq-glass-bright: rgba(255, 255, 255, 0.32);
--lq-glass-shade: rgba(73, 111, 209, 0.07);
--lq-glass-soft: rgba(255, 255, 255, 0.06);
--lq-muted: rgba(242, 246, 255, 0.66);
--lq-placeholder: rgba(235, 241, 255, 0.42);
--lq-quiet-fill: transparent;
--lq-quiet-line: rgba(255, 255, 255, 0.13);
--lq-regular-fill: rgba(255, 255, 255, 0.012);
--lq-regular-line: rgba(255, 255, 255, 0.18);
--lq-shadow-color: rgba(4, 9, 24, 0.14);
--lq-solid-fill: rgb(30, 38, 60);
--lq-switch-fill: transparent;
--lq-switch-line: rgba(255, 255, 255, 0.14);
```

### Light theme

```css
--lq-clear-fill: transparent;
--lq-clear-line: rgba(66, 85, 128, 0.22);
--lq-control-fill: transparent;
--lq-control-line: rgba(66, 85, 128, 0.24);
--lq-control-hover-line: color-mix(in srgb, var(--lq-button-tint, var(--lq-accent)) 28%, rgba(255, 255, 255, 0.18));
--lq-dock-active: #17203a;
--lq-dock-hover-fill: rgba(255, 255, 255, 0.015);
--lq-dock-indicator-fill: transparent;
--lq-field-fill: transparent;
--lq-field-focus-fill: color-mix(in srgb, var(--lq-accent) 1.5%, transparent);
--lq-field-line: rgba(66, 85, 128, 0.24);
--lq-foreground: #12182a;
--lq-glass-bright: rgba(255, 255, 255, 0.56);
--lq-glass-shade: rgba(62, 91, 164, 0.07);
--lq-glass-soft: rgba(255, 255, 255, 0.16);
--lq-muted: rgba(26, 35, 58, 0.62);
--lq-placeholder: rgba(28, 40, 68, 0.42);
--lq-quiet-fill: transparent;
--lq-quiet-line: rgba(66, 85, 128, 0.16);
--lq-regular-fill: rgba(255, 255, 255, 0.015);
--lq-regular-line: rgba(66, 85, 128, 0.26);
--lq-shadow-color: rgba(42, 55, 91, 0.1);
--lq-solid-fill: rgb(239, 244, 255);
--lq-switch-fill: transparent;
--lq-switch-line: rgba(66, 85, 128, 0.24);
```

## MCP server

Point a coding agent at the live API instead of these files:

```bash
npx -y @liquefy-ui/mcp
```

Tools: `get_conventions`, `list_components`, `get_component`, `search_components`,
`get_component_source`, `get_tokens`, `list_icons`, `get_core_api`.