Introduction

Jamie's design system is a component library built on Base UI and Tailwind CSS v4.

Packages

@jamie/ui

The core component library. Import components as:

import { Button } from '@jamie/ui/button'
import { Dialog } from '@jamie/ui/dialog'
import { Select } from '@jamie/ui/select'

@jamie/icons

Brand and product icons, typed as LucideProps. Import per icon:

// product specific icons
import JamieIcon from '@jamie/icons/JamieIcon'
 
// generic UI icons
import { InfoIcon } from 'lucide-react'

For generic UI icons, use lucide-react directly.

Foundations

Three foundation pages cover the system's visual language:

• Colors — Primitive and semantic color tokens, including light and dark mode mappings
• Typography — The type scale from Display down to Label, with size and weight pairings
• Icons — The full icon set available across components

Composition

Components use the Base UI render prop for element-level composition. Pass the element you want to render as a prop — the component's styles, behavior, and accessibility attributes transfer automatically:

<Button render={<a href="/meetings" />}>
  View Meetings
</Button>

For advanced cases, pass a function to access the component's internal state:

<Switch.Thumb
  render={(props, state) => (
    <span {...props}>{state.checked ? <CheckIcon /> : <XIcon />}</span>
  )}
/>