@palmercon/ah-ui

Austin Health Design System — React component library built with shadcn/ui, Tailwind CSS v4, and Austin Health brand tokens.

Installation

npm install @palmercon/ah-ui

Peer dependencies

react and react-dom ≥ 18 must be installed in the consuming project. They are not bundled.

npm install react react-dom

Usage

Import the global stylesheet once at your app entry point, then import components as needed:

// app entry (e.g. main.tsx or _app.tsx)
import '@palmercon/ah-ui/styles.css'

// anywhere in your app
import { Button } from '@palmercon/ah-ui'

export function MyPage() {
  return (
    <Button>Get started</Button>
  )
}

Note: Button's default variant is named primary (e.g. <Button variant="primary">), not default. This differs from Badge and Alert, which use variant="default". Omitting the prop gives you primary automatically.

Available components

| Component | Exports | |-----------|---------| | Button | Button, buttonVariants | | Badge | Badge, badgeVariants | | Separator | Separator | | Skeleton | Skeleton | | Avatar | Avatar, AvatarImage, AvatarFallback | | Input | Input | | Label | Label | | Textarea | Textarea | | Checkbox | Checkbox | | RadioGroup | RadioGroup, RadioGroupItem | | Switch | Switch | | Select | Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator | | Card | Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction | | Alert | Alert, AlertTitle, AlertDescription, alertVariants | | Accordion | Accordion, AccordionItem, AccordionTrigger, AccordionContent | | Tabs | Tabs, TabsList, TabsTrigger, TabsContent | | Dialog | Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger | | DropdownMenu | DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent | | Tooltip | Tooltip, TooltipTrigger, TooltipContent, TooltipProvider | | Table | Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption |

Brand & design tokens

All components are styled against the Austin Health brand guidelines (documented in the repo at .claude/rules/client/brand-guidelines.md). The primary colour is Austin purple #4b2a72 (Pantone 267), used for default buttons, focus rings, and interactive states. Destructive states use Austin red #df1f51. Headings are set in Work Sans (Bold/Medium/Light); body copy and UI labels use Karla (Regular/Bold/Italic). The design system exposes gradient utilities built from the brand Master Gradient — #4b2a72 purple → #d21c62 pink → #e05e26 orange — via the bg-austin-gradient Tailwind class, intended for backgrounds and the "The Pulse" brand device. Fallback fonts are Arial, Helvetica, sans-serif when brand fonts cannot load.