@bergetai/ui

A React component library for Berget AI built using Tailwind CSS v4, Radix UI, and shadcn.

Installation

npm install @bergetai/ui

The package is published to the GitHub Package Registry. Configure your .npmrc:

@berget-ai:registry=https://npm.pkg.github.com

Setup

Import the stylesheet in your app entry point:

import '@bergetai/ui/styles';

The stylesheet provides CSS custom properties for theming (colors, radii, etc.). You need Tailwind CSS v4 configured in your project for the utility classes to work.

Usage

import { Button, Card, CardHeader, CardTitle, CardContent } from '@bergetai/ui';

function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="default">Click me</Button>
      </CardContent>
    </Card>
  );
}

Architecture

Components are organized by category:

• actions - Interactive controls (Button)
• branding - Brand identity assets (Logotype, Symbol)
• data - Content presentation (CodeBlock, FeatureCards, HeroBlock, List, StatCard)
• display - Visual elements (Badge, Card, Icon, Typography)
• feedback - Status and messaging (Alert, SectionHeader)
• forms - Form field primitives (Checkbox, Input, Label, Select, Textarea)
• layout - Structural and spacing primitives (Container, Divider, Panel, Section, Stack)
• navigation - Navigation and routing (Header, Link, LanguageSelector)

Development

# Build the package
pnpm build

# Watch mode
pnpm dev

# Type check
pnpm typecheck