Build consistent interfaces without slowing down product work.

npm install alpha-ui-kit

import { TransferList } from 'alpha-ui-kit'

const items = [
  { value: 'item-1', label: 'List item 1' },
  { value: 'item-2', label: 'List item 2' },
  { value: 'item-3', label: 'List item 3' },
  { value: 'item-4', label: 'List item 4' },
  { value: 'item-5', label: 'List item 5' },
  { value: 'item-6', label: 'List item 6' },
  { value: 'item-7', label: 'List item 7' },
  { value: 'item-8', label: 'List item 8' },
]

export default function TransferExample() {
  return (
    <TransferList
      items={items}
      defaultValue={['item-5', 'item-6', 'item-7', 'item-8']}
      showMoveAll
      showSelectAll
      leftTitle="Choices"
      rightTitle="Chosen"
    />
  )
}

import { Button, Card, Input, Textarea } from 'alpha-ui-kit'
import 'alpha-ui-kit/styles.css'

export default function App() {
  return (
    <Card className="max-w-xl">
      <Input label="Name" placeholder="Ada Lovelace" />
      <Textarea label="Project Brief" rows={4} />
      <Button className="mt-4">Create Project</Button>
    </Card>
  )
}

import { Button } from 'alpha-ui-kit'

export default function Example() {
  return (
    <Button variant="contained" color="primary" size="medium">
      Continue
    </Button>
  )
}

import { Input, Select, Calendar, Textarea, Checkbox, RadioGroup, RadioGroupItem, Switch, Button } from 'alpha-ui-kit'

export default function FormDemo() {
  return (
    <div className="space-y-4 max-w-md">
      <Input label="Name" placeholder="Ada Lovelace" />
      <Select label="Framework" defaultValue="react">
        <option value="react">React</option>
        <option value="next">Next.js</option>
        <option value="vue">Vue</option>
      </Select>
      <Calendar label="Launch Date" />
      <Textarea label="Project Notes" rows={3} />
      <Checkbox label="Accept terms" description="You can continue after accepting." />
      <RadioGroup defaultValue="starter">
        <RadioGroupItem value="starter" label="Starter" />
        <RadioGroupItem value="pro" label="Pro" />
      </RadioGroup>
      <Switch label="Enable notifications" defaultChecked />
      <Button fullWidth>Submit</Button>
    </div>
  )
}

import { Input } from 'alpha-ui-kit'

export default function InputTypesDemo() {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <Input type="text" label="Text" placeholder="Enter text" />
      <Input type="email" label="Email" placeholder="name@example.com" />
      <Input type="password" label="Password" placeholder="Enter password" />
      <Input type="number" label="Number" placeholder="42" />
      <Input type="search" label="Search" placeholder="Search..." />
      <Input type="tel" label="Phone" placeholder="+1 555 0100" />
      <Input type="url" label="Website" placeholder="https://example.com" />
      <Input type="date" label="Date" />
      <Input type="time" label="Time" />
      <Input type="datetime-local" label="Datetime" />
      <Input type="month" label="Month" />
      <Input type="week" label="Week" />
      <Input type="color" label="Color" defaultValue="#0ea5e9" />
    </div>
  )
}