@liquidaria/react

React component library for the Liquidaria Design System.

Installation

npm install @liquidaria/react lucide-react
# or
pnpm add @liquidaria/react lucide-react

Peer dependencies: react >= 18, react-dom >= 18, lucide-react >= 0.400.0.

Usage

import { Button, Input, Card } from '@liquidaria/react'
// CSS tokens are loaded automatically as a side effect

export default function App() {
  return (
    <Card variant="elevated">
      <Input label="Email" placeholder="[email protected]" />
      <Button variant="primary" icon="ArrowRight">Continue</Button>
    </Card>
  )
}

Components

Icon

Renders any Lucide icon by PascalCase name.

<Icon name="Search" size={20} strokeWidth={1.75} />

Button

<Button variant="primary" size="md" icon="Plus">New item</Button>

| Prop | Type | Default | | ----------- | --------------------------------------------------------------------- | ----------- | | variant | 'primary' \| 'ink' \| 'secondary' \| 'ghost' \| 'danger' \| 'glass' | 'primary' | | size | 'sm' \| 'md' \| 'lg' | 'md' | | icon | LucideIconName | — | | iconRight | LucideIconName | — | | full | boolean | false |

Input

<Input label="Password" type="password" error="Incorrect password." />

| Prop | Type | | ------- | ---------------- | | label | string | | hint | string | | error | string | | icon | LucideIconName |

Card

<Card variant="glass">…</Card>

Variants: flat · elevated · high · glass

Pill

<Pill tone="success" dot>Active</Pill>

Tones: neutral · brand · success · warning · danger · info

Avatar

<Avatar initials="EF" tone="brand" size={40} />
<Avatar src="/photo.jpg" size={40} />

Tones: brand · warm · green · plum

Switch

<Switch checked={on} onChange={setOn} label="Notifications" />

Toast

<Toast tone="success" title="Saved" body="Your changes were saved." onDismiss={dismiss} />

Tones: neutral · success · dark

TypeScript

All components are written in strict TypeScript, export their prop interfaces, and forward refs to the underlying DOM element.

import type { ButtonProps, ButtonVariant } from '@liquidaria/react'