@bookers/ui

Bookers UI component library — React + Tailwind CSS v4.

Installation

npm install @bookers/ui

The library requires Tailwind CSS v4. Add the package to your CSS:

@import "@bookers/ui/dist/styles.css";

Usage

import { Button, Field, Label, Input, FieldMessage } from "@bookers/ui";

<Field>
  <Label htmlFor="email" required>Email</Label>
  <Input id="email" type="email" placeholder="[email protected]" />
  <FieldMessage>We'll never share your email.</FieldMessage>
</Field>

<Button variant="default" size="md">Save changes</Button>

Development

npm run dev        # Storybook on :6006
npm test           # Vitest (watch)
npm run test:ui    # Vitest UI + coverage
npm run build      # tsc + Vite library build

MCP server

While npm run dev is running, the local MCP server is available at http://localhost:6006/mcp. Add it to your project's .mcp.json to give Claude Code context about unreleased components:

{
  "mcpServers": {
    "bookers-ui": {
      "type": "http",
      "url": "http://localhost:6006/mcp"
    }
  }
}

For released components, the remote server at https://ui.bookers.dev/mcp is always available without any local setup.

Changelog

See CHANGELOG.md for breaking changes and notable updates (including DataTable API migration).

Stack

• React 18/19 (peer dep)
• TypeScript 5 (strict)
• Tailwind CSS v4
• Storybook 10
• Vitest 4