Installation and setup

Get Alpha UI running in minutes.

Install the package, import the styles, and start building with the same structured docs flow used by mature design systems.

$npm installalpha-ui-kit

Package managers

Copy the command you need

1 command

npm

npm install alpha-ui-kit

yarn

yarn add alpha-ui-kit

pnpm

pnpm add alpha-ui-kit

bun

bun add alpha-ui-kit

Three steps to ship

Step 01

Install the package

Add Alpha UI to your project through your preferred package manager.

npm install alpha-ui-kit

Step 02

Import styles once

Load the stylesheet at your application root to enable component styling.

import 'alpha-ui-kit/styles.css'

Step 03

Start composing

Import components and use them directly in your pages or design system.

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

React setup

Import the pieces you need.

The library is designed for direct imports and simple composition, keeping the learning curve shallow and the output consistent.

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

export default function App() {
  return (
    <Card className="max-w-md p-6">
      <Input label="Name" placeholder="Ada Lovelace" />
      <Button className="mt-4" color="primary">
        Continue
      </Button>
    </Card>
  )
}

Dark mode

Built-in dark mode support.

Wrap your app with ThemeProvider and use the ThemeToggle component. All components respond automatically to the dark class.

// app/layout.tsx
import { ThemeProvider } from '@/components/ThemeProvider'

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="light"
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Uses next-themes — works with Next.js App Router and Pages Router.

You're set.

Continue into the docs to explore buttons, inputs, DataTable, Charts, and the rest of the 80+ component catalog.

View docs Browse components