@northslopetech/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 @northslopetech/altitude-ui
# or
pnpm add @northslopetech/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

Available Components

This package includes the following components:

• Badge - Small status and informational labels
• Button - Interactive button component with multiple variants and sizes
• Checkbox - Form checkbox input with accessibility features
• DatePicker - Date selection component with calendar popup
• FormField - Form field wrapper with label and error handling
• Input - Text input component with consistent styling
• Select - Dropdown selection component with search capabilities
• Tabs - Tab navigation component
• Typography - Text components with design system typography tokens
• Upload - File upload component with drag and drop support

Usage

Button

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

import { Button } from "@northslopetech/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

Checkbox

The Checkbox component is built on Radix UI Checkbox with Altitude design tokens.

import { Checkbox } from "@northslopetech/altitude-ui";

function Example() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <label htmlFor="terms">Accept terms and conditions</label>
    </div>
  );
}

Checkbox Props

All standard Radix UI Checkbox attributes are supported, including:

• checked - Controlled checked state
• onCheckedChange - Callback when checked state changes
• disabled - Disable the checkbox
• required - Mark as required for form validation

asChild Pattern

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

import { Button } from "@northslopetech/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

Prerequisites

This package depends on design tokens. Before development, ensure tokens are built:

# From the root directory
pnpm tokens:build

Commands

# Build the package
pnpm build

# Watch for changes (tokens must be built first)
pnpm dev

# Run linting
pnpm lint

# Type checking
pnpm check-types

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

Note: The package includes a prebuild script that automatically builds tokens, but for development mode you should build tokens manually first.

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

Input

A text input component with consistent styling:

import { Input } from "@northslopetech/altitude-ui";

function Example() {
  return (
    <Input type="email" placeholder="Enter your email" className="w-full" />
  );
}

Select

A dropdown selection component with built-in search and filtering:

import { Select } from "@northslopetech/altitude-ui";

const options = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
];

function Example() {
  return (
    <Select
      placeholder="Select a fruit..."
      options={options}
      onValueChange={(value) => console.log(value)}
    />
  );
}

DatePicker

A date selection component with calendar popup:

import { DatePicker } from "@northslopetech/altitude-ui";

function Example() {
  const [date, setDate] = useState<Date>();

  return (
    <DatePicker selected={date} onSelect={setDate} placeholder="Pick a date" />
  );
}

Badge

Small status and informational labels:

import { Badge } from "@northslopetech/altitude-ui";

function Example() {
  return (
    <div className="flex gap-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Error</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Tabs

Tab navigation component:

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@northslopetech/altitude-ui";

function Example() {
  return (
    <Tabs defaultValue="account" className="w-full">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account content</TabsContent>
      <TabsContent value="password">Password content</TabsContent>
    </Tabs>
  );
}

Typography

Pre-styled text components using design system typography tokens:

import { Typography } from "@northslopetech/altitude-ui";

function Example() {
  return (
    <div>
      <Typography variant="display-xl">Large Display Text</Typography>
      <Typography variant="heading-lg">Section Heading</Typography>
      <Typography variant="body-md">Body paragraph text</Typography>
      <Typography variant="label-sm-bold">Form Label</Typography>
    </div>
  );
}