Overview

HyperSaaS uses shadcn/ui as its component foundation — a collection of accessible, customizable components built on Radix UI primitives and styled with Tailwind CSS.

Component Categories

UI Primitives (`components/ui/`)

44+ base components from shadcn/ui:

Category	Components
Form & Input	Button, Input, Textarea, Select, Checkbox, Switch, Label, Form, DatePicker, Calendar
Navigation	Sidebar, Breadcrumb, NavigationMenu, Tabs, Pagination, Menubar
Overlay	Dialog, AlertDialog, Sheet, Popover, DropdownMenu, HoverCard, Tooltip, Command
Data Display	Table, Badge, Card, Avatar, Progress, Skeleton, Carousel, Chart
Layout	ScrollArea, Separator, Resizable, Collapsible, Accordion, ToggleGroup
Feedback	Sonner (toasts)

AI Elements (`components/ai-elements/`)

28 chat-specific components from the Vercel AI SDK patterns:

Component	Purpose
`message.tsx`	Message container with avatar
`prompt-input.tsx`	Rich input with attachments
`chain-of-thought.tsx`	Expandable reasoning steps
`branch.tsx`	Response branch navigation
`suggestion.tsx`	Clickable suggestion chip
`citation-sources.tsx`	RAG source display
`code-block.tsx`	Syntax-highlighted code
`canvas.tsx`	Fullscreen artifact view
`loader.tsx` / `shimmer.tsx`	Loading animations

Feature Components

Directory	Purpose
`components/auth/`	Login, register, password reset forms
`components/chat/`	Chat session UI, messages, settings
`components/documents/`	Upload, viewer, table
`components/knowledge-base/`	KB list, create, detail
`components/workspaces/`	Workspace CRUD, members
`components/teams/`	Team management
`components/billing/`	Subscription management
`components/marketing/`	Marketing page sections
`components/dashboard/`	Dashboard layout parts
`components/fragments/`	Small reusable pieces

Design Principles

Composition

Components compose via props and children, not inheritance:

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content here</p>
  </CardContent>
</Card>

Class Merging

The cn() utility merges Tailwind classes safely:

import { cn } from "@/lib/utils";

// Merges classes, handles conflicts (last wins)
<div className={cn("px-4 py-2", isActive && "bg-primary text-primary-foreground")} />

Forms

Forms use react-hook-form with Zod validation:

const form = useForm<ChatCreateInput>({
  resolver: zodResolver(chatSessionCreateSchema),
  defaultValues: { name: "", ai_provider: "openai", ai_model: "gpt-4o" },
});

<Form {...form}>
  <FormField
    control={form.control}
    name="name"
    render={({ field }) => (
      <FormItem>
        <FormLabel>Name</FormLabel>
        <FormControl>
          <Input {...field} />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
</Form>

Responsive Design

Components adapt to screen size using Tailwind breakpoints and the useIsMobile() hook:

const isMobile = useIsMobile(); // true if viewport < 768px

// Desktop: resizable panels
// Mobile: stacked layout with sheet modals
{isMobile ? <Sheet>{content}</Sheet> : <ResizablePanel>{content}</ResizablePanel>}

Adding Components

To add a new shadcn/ui component:

npx shadcn@latest add [component-name]

This generates the component in src/components/ui/ with proper Tailwind styling and Radix UI accessibility.

On this page