@altitude/ui

React UI components for the Altitude design system, built on top of shadcn/ui and styled with Altitude design tokens.

Installation

npm install @altitude/ui
# or
pnpm add @altitude/ui

Architecture

This package combines the best of both worlds:

• shadcn/ui: Provides the foundation, accessibility, and component patterns
• Altitude Design Tokens: Replaces shadcn/ui's default colors and typography with our design system

Components are built using:

• Radix UI: For accessibility and behavior
• class-variance-authority: For type-safe variant management
• Tailwind CSS: For styling with Altitude design tokens

Usage

Button

The Button component is built on shadcn/ui's Button but styled with Altitude design tokens.

import { Button } from '@altitude/ui';

function Example() {
  return (
    <div className="flex gap-2 flex-wrap">
      {/* Default variant */}
      <Button>Primary Button</Button>
      
      {/* Other variants */}
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
      <Button variant="destructive">Destructive</Button>
      
      {/* Different sizes */}
      <Button size="sm">Small</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra Large</Button>
      <Button size="icon">🎯</Button>
    </div>
  );
}

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'link' \| 'destructive' | 'default' | Visual style variant | | size | 'sm' \| 'default' \| 'lg' \| 'xl' \| 'icon' | 'default' | Size of the button | | asChild | boolean | false | Render as child element (for composition) |

All standard HTML button attributes are also supported.

Design Token Integration

The Button component uses Altitude design tokens:

• Colors: primary-*, neutral-*, semantic-error, base-white
• Typography: body-xs, body-sm, body-md, body-lg font sizes
• Focus states: primary-500 ring color
• Hover states: Consistent with design system color scales

asChild Pattern

Use the asChild prop for composition with other components (powered by Radix UI Slot):

import { Button } from '@altitude/ui';
import Link from 'next/link';

<Button asChild>
  <Link href="/dashboard">Go to Dashboard</Link>
</Button>

shadcn/ui Integration

This package is configured to work with shadcn/ui:

• Uses the same component patterns and APIs
• Configured with components.json for CLI compatibility
• Can add more shadcn/ui components with: npx shadcn@latest add [component]
• All components are automatically styled with Altitude design tokens

Development

# Build the package
pnpm build

# Watch for changes
pnpm dev

# Run linting
pnpm lint

# Type checking
pnpm check-types

# Add more shadcn/ui components
npx shadcn@latest add [component-name]

Adding New Components

To add more shadcn/ui components:

1. Run npx shadcn@latest add [component-name]
2. Update the generated component to use Altitude design tokens
3. Export the component from src/index.ts
4. Update this README with usage examples