A design system that is generated

import { Button } from '@quxkit/ui-kit-registry'

export default function ButtonDemo() {
  return (
    <div className="demo-row">
      <Button>Save changes</Button>
      <Button variant="soft">Duplicate</Button>
      <Button variant="outline">Export</Button>
      <Button variant="ghost">Cancel</Button>
      <Button tone="danger">Delete</Button>
      <Button loading>Publishing</Button>
      <Button disabled>Unavailable</Button>
    </div>
  )
}

import { Checkbox, Field, Select, Switch } from '@quxkit/ui-kit-registry'

export default function FieldDemo() {
  return (
    <div className="demo-stack">
      <Field
        label="Work email"
        type="email"
        description="We only use this for billing."
        defaultValue="[email protected]"
      />
      <Select
        label="Plan"
        placeholder="Choose a plan"
        items={[
          { value: 'free', label: 'Free' },
          { value: 'pro', label: 'Pro' },
          { value: 'scale', label: 'Scale' },
        ]}
      />
      <Switch label="Two-factor authentication" defaultChecked />
      <Checkbox label="Email me about outages" defaultChecked />
    </div>
  )
}

import { Alert, Button } from '@quxkit/ui-kit-registry'

export default function AlertDemo() {
  return (
    <div className="demo-stack">
      <Alert
        tone="danger"
        title="Upload failed"
        actions={
          <Button size="sm" tone="danger" variant="outline">
            Retry
          </Button>
        }
      >
        The file is larger than the 25 MB limit.
      </Alert>

      <Alert tone="success" title="Deployment complete">
        Version 4.2.0 is live on production.
      </Alert>

      <Alert tone="info" variant="outline" title="Scheduled maintenance">
        The API will be read-only on Sunday from 02:00 to 04:00 UTC.
      </Alert>
    </div>
  )
}

import { Table, type SortState } from '@quxkit/ui-kit-registry'
import { useState } from 'react'

const INVOICES = [
  { id: '1', number: 'INV-0041', customer: 'Acme Corp', amount: '$4,210.00' },
  { id: '2', number: 'INV-0040', customer: 'Globex', amount: '$980.00' },
  { id: '3', number: 'INV-0039', customer: 'Initech', amount: '$12,400.00' },
]

export default function TableDemo() {
  const [selected, setSelected] = useState<string[]>(['2'])
  const [sort, setSort] = useState<SortState>({ column: 'amount', direction: 'descending' })

  return (
    <Table
      caption="Invoices from the last 30 days"
      columns={[
        { key: 'number', header: 'Invoice', sortable: true },
        { key: 'customer', header: 'Customer' },
        { key: 'amount', header: 'Amount', align: 'end', sortable: true },
      ]}
      rows={INVOICES}
      getRowId={(row) => row.id}
      sort={sort}
      onSortChange={setSort}
      selected={selected}
      onSelectionChange={setSelected}
    />
  )
}

import { Button, Dropdown, Modal, useToast } from '@quxkit/ui-kit-registry'
import { useState } from 'react'

export default function OverlayDemo() {
  const toast = useToast()
  const [open, setOpen] = useState(false)

  return (
    <div className="demo-row">
      <Button onClick={() => setOpen(true)}>Delete project</Button>

      <Dropdown
        trigger={
          <Button variant="outline" tone="neutral">
            Actions
          </Button>
        }
        items={[
          { label: 'Rename', onSelect: () => toast.show({ tone: 'success', title: 'Renamed' }), shortcut: 'R' },
          { label: 'Duplicate', onSelect: () => toast.show({ tone: 'success', title: 'Duplicated' }) },
          { separator: true },
          { label: 'Delete project', onSelect: () => setOpen(true), tone: 'danger' },
        ]}
      />

      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Delete this project?"
        description="Its 1,204 documents will be permanently removed."
        footer={
          <>
            <Button variant="ghost" onClick={() => setOpen(false)}>
              Keep project
            </Button>
            <Button tone="danger" onClick={() => setOpen(false)}>
              Delete project
            </Button>
          </>
        }
      >
        <p style={{ margin: 0 }}>This cannot be undone.</p>
      </Modal>
    </div>
  )
}

import { Tabs } from '@quxkit/ui-kit-registry'

export default function TabsDemo() {
  return (
    <Tabs
      items={[
        {
          value: 'overview',
          label: 'Overview',
          content: <p className="demo-body">4,210 of 10,000 credits used this month.</p>,
        },
        {
          value: 'usage',
          label: 'Usage',
          content: <p className="demo-body">Peak was Tuesday, at 612 credits.</p>,
        },
        {
          value: 'billing',
          label: 'Billing',
          content: <p className="demo-body">Next invoice on 1 September.</p>,
        },
      ]}
    />
  )
}

import { Avatar, AvatarGroup, Badge, Button, Chip, User } from '@quxkit/ui-kit-registry'

export default function DisplayDemo() {
  return (
    <div className="demo-stack demo-stack--center">
      <div className="demo-row">
        <Chip tone="success">Active</Chip>
        <Chip tone="warning">Expiring</Chip>
        <Chip tone="danger">Failed</Chip>
        <Chip>Draft</Chip>
        <Chip tone="accent" variant="solid">
          Pro
        </Chip>
      </div>

      <div className="demo-row">
        <Badge content={3} tone="danger" label="3 unread">
          <Button variant="outline" tone="neutral" size="sm">
            Inbox
          </Button>
        </Badge>

        <AvatarGroup max={3} size="sm">
          <Avatar name="Ada Lovelace" />
          <Avatar name="Grace Hopper" />
          <Avatar name="Katherine Johnson" />
          <Avatar name="Annie Easley" />
        </AvatarGroup>

        <User name="Ada Lovelace" description="Owner" />
      </div>
    </div>
  )
}

import { Calendar } from '@quxkit/ui-kit-registry'
import { useState } from 'react'

export default function CalendarDemo() {
  const [date, setDate] = useState('2026-08-19')

  return <Calendar label="Delivery date" value={date} onChange={setDate} />
}