@stefan-andai/ui

And AI Design System — Tailwind CSS 4 preset + React component library.

Install

npm install @stefan-andai/ui

Setup

1. Import the CSS

// app/layout.tsx or main entry
import '@stefan-andai/ui/styles.css'

2. Use the Tailwind preset

// tailwind.config.ts
import { andaiPreset } from '@stefan-andai/ui/preset'

export default {
  presets: [andaiPreset],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@stefan-andai/ui/dist/**/*.js',
  ],
}

3. Wrap with providers

import { ThemeProvider, ToastProvider } from '@stefan-andai/ui'

export default function Layout({ children }) {
  return (
    <ThemeProvider>
      <ToastProvider>
        {children}
      </ToastProvider>
    </ThemeProvider>
  )
}

Components

Button

import { Button } from '@stefan-andai/ui'

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button size="sm">Small</Button>
<Button loading>Loading...</Button>
<Button href="/about">Link Button</Button>

Card

import { Card } from '@stefan-andai/ui'

<Card>Default card</Card>
<Card variant="elevated">With shadow</Card>
<Card variant="interactive" onClick={() => {}}>Clickable</Card>

Form

import { Form, Input, Select, Button } from '@stefan-andai/ui'

<Form onSubmit={(data) => console.log(data)}>
  <Input name="email" label="Email" />
  <Select name="country" options={countries} label="Country" searchable />
  <Button type="submit">Submit</Button>
</Form>

Badge

import { Badge } from '@stefan-andai/ui'

<Badge>Default</Badge>
<Badge status="positive">Active</Badge>
<Badge status="negative">Error</Badge>
<Badge status="warning">Pending</Badge>
<Badge status="info">Info</Badge>

Typography

import { Heading, Text } from '@stefan-andai/ui'

<Heading>Page Title</Heading>
<Heading level={2}>Section</Heading>
<Text>Body text</Text>
<Text variant="muted" size="sm">Secondary info</Text>

Layout

import { Container, Stack, Grid } from '@stefan-andai/ui'

<Container>
  <Stack gap="lg">
    <Heading>Title</Heading>
    <Grid cols={3} colsSm={1} gap="md">
      <Card>A</Card>
      <Card>B</Card>
      <Card>C</Card>
    </Grid>
  </Stack>
</Container>

ThemeProvider

import { ThemeProvider, useTheme } from '@stefan-andai/ui'

// Toggle theme
const { theme, toggleTheme } = useTheme()

Design Tokens

Access raw tokens for custom components:

import { colors, spacing, typography } from '@stefan-andai/ui/tokens'

Tailwind Preset

Use the preset standalone without components:

import { andaiPreset } from '@stefan-andai/ui/preset'