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.

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

Step 01

Install the package

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

Step 02

Import styles once

Load alpha-ui-kit/styles.css at the application root to enable the component styling layer.

Step 03

Start composing

Use components directly in pages or add them to your design system workflow.

React setup

Import the pieces you need.

The library is designed for direct imports and simple composition, which keeps 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">
      <Input label="Name" placeholder="Ada Lovelace" />
      <Button className="mt-4">Continue</Button>
    </Card>
  )
}

MCP setup

Connect Stitch through `.vscode/mcp.json`.

The workspace now includes the Stitch server entry so VS Code can talk to the design system tooling directly.

{
  "servers": {
    "stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "your-api-key"
      }
    }
  }
}

Save the file in .vscode/mcp.json, then reload VS Code to expose the Stitch MCP server.

You're set.

Continue into the docs to explore buttons, inputs, transfer list behavior, and the rest of the component catalog.

View docs Browse components