Components¶

Component library reference organized by category.

UI Primitives¶

Located in components/ui/, these are base components following shadcn/Radix patterns.

Components	Purpose
`button.tsx`	Button variants (primary, secondary, destructive, etc.)
`input.tsx`	Text input with variants
`textarea.tsx`	Multi-line text input
`select.tsx`	Dropdown selection
`checkbox.tsx`	Checkbox input
`switch.tsx`	Toggle switch
`label.tsx`	Form labels
`card.tsx`	Card container (Card, CardHeader, CardContent, etc.)
`tabs.tsx`	Tab navigation (Tabs, TabsList, TabsTrigger, TabsContent)
`table.tsx`	Data table (Table, TableHeader, TableBody, TableRow, etc.)
`dialog.tsx`	Modal dialogs
`dropdown-menu.tsx`	Dropdown menus
`tooltip.tsx`	Hover tooltips
`avatar.tsx`	User avatars
`badge.tsx`	Status badges
`scroll-area.tsx`	Custom scrollbars
`separator.tsx`	Visual separators
`skeleton.tsx`	Loading placeholders
`toast.tsx`	Toast notifications
`sonner.tsx`	Sonner toast integration

Usage Example¶

import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>
    <Button variant="default">Click me</Button>
  </CardContent>
</Card>

components/ui/sidebar.tsx

Complete sidebar system:

Component	Purpose
`SidebarProvider`	Context provider
`Sidebar`	Main container
`SidebarHeader`	Top section
`SidebarContent`	Scrollable content
`SidebarFooter`	Bottom section
`SidebarGroup`	Section grouping
`SidebarGroupLabel`	Section label
`SidebarMenu`	Menu container
`SidebarMenuItem`	Menu item wrapper
`SidebarMenuButton`	Clickable menu item
`useSidebar`	Access sidebar state

Layout Components¶

components/layout/

Component	Purpose
`conditional-layout.tsx`	Chooses layout based on route
`navbar.tsx`	Marketing site navbar
`footer.tsx`	Site footer

Sidebars¶

components/layout/sidebars/

Component	Purpose
`portal-sidebar.tsx`	Main portal navigation
`profile-sidebar.tsx`	Profile section navigation
`org-sidebar.tsx`	Organization settings navigation

Cards¶

components/cards/

Component	Purpose
`camera-info-card.tsx`	Camera metadata display
`two-factor-auth-card.tsx`	2FA settings card
`pricing-card.tsx`	Pricing plan display
`tutorial-card.tsx`	Tutorial step card
`embedding-card.tsx`	Embedding preview card

Tutorial Card¶

<TutorialCard
  icon={<UploadIcon />}
  title="Upload Files"
  description="Add documents, videos, and images"
  estimatedTime="2 min"
  isCompleted={progress.upload}
  onAction={() => router.push("/context/upload")}
/>

Tables¶

components/tables/

Organized by domain.

Sessions¶

Component	Purpose
`sessions-list-table.tsx`	Session list with actions
`session-logs-table.tsx`	Session log entries
`timeline-table.tsx`	Chronological timeline

Embeddings¶

Component	Purpose
`embeddings-table.tsx`	Embedding data table
`embeddings-list.tsx`	Embedding card list

Training¶

Component	Purpose
`jobs-table.tsx`	Training job list

Organizations¶

Component	Purpose
`org-teams-table.tsx`	Organization teams
`org-members-table.tsx`	Organization members
`org-invites-table.tsx`	Pending invitations

Teams¶

Component	Purpose
`team-members-table.tsx`	Team roster
`team-devices-table.tsx`	Team devices

Users¶

Component	Purpose
`user-organizations-table.tsx`	User's organizations
`user-invites-table.tsx`	User's pending invites
`user-organizations-list-table.tsx`	Alternative org list

Forms¶

components/forms/

Auth Forms¶

components/forms/auth/

Component	Purpose
`signin-form.tsx`	Login form
`signup-form.tsx`	Registration form
`reset-password-form.tsx`	Password recovery
`verify-code-form.tsx`	Email verification
`passkeys-form.tsx`	Passkey management
`oauth-button-form.tsx`	Social login buttons
`link-oauth-account-button-form.tsx`	Link social accounts
`logout-button.tsx`	Sign out button
`update-user-form.tsx`	Profile update form

Organization Forms¶

components/forms/org/

Component	Purpose
`new-organization-form.tsx`	Create organization
`update-organization-form.tsx`	Edit organization
`new-team-form.tsx`	Create team
`update-team-form.tsx`	Edit team
`invite-to-org-form.tsx`	Invite member to org
`invite-to-team-form.tsx`	Add member to team

Session Forms¶

components/forms/sessions/

Component	Purpose
`session-form-builder.tsx`	Form template builder
`dynamic-form-renderer.tsx`	Render form from schema
`session-log-form.tsx`	Log entry form
`session-logger.tsx`	Live logging interface
`create-session-with-form.tsx`	Session creation wizard

Other Forms¶

Component	Purpose
`chat-form.tsx`	Chat interface
`chat-modal.tsx`	Modal chat variant
`contact-form.tsx`	Contact page form
`add-to-newsletter-form.tsx`	Newsletter signup
`register-device-form.tsx`	Device registration
`invite-member-form.tsx`	Generic invite form
`stripe-payment-form.tsx`	Stripe checkout

Modals¶

components/modal/

Session Modals¶

Component	Purpose
`clip-creation-modal.tsx`	Create video clip
`clip-detail-modal.tsx`	View clip details
`log-detail-modal.tsx`	View log details
`delete-session-form-modal.tsx`	Confirm form deletion

Organization Modals¶

Component	Purpose
`invite-org-member-modal.tsx`	Invite to organization
`invite-team-member-modal.tsx`	Add to team
`delete-org-modal.tsx`	Confirm org deletion
`leave-org-modal.tsx`	Confirm leaving org
`delete-team-modal.tsx`	Confirm team deletion

Other Modals¶

Component	Purpose
`newsletter-modal.tsx`	Newsletter subscription
`verify-code-modal.tsx`	Email verification

Stream Components¶

components/stream/

Component	Purpose
`camera-selector.tsx`	Camera dropdown
`stream-controls.tsx`	Start/stop, detection toggles
`video-canvas.tsx`	Video frame with overlays

Video Canvas¶

<VideoCanvas
  frameData={{
    frame: "base64...",
    detections: [
      { class: "player", confidence: 0.95, bbox: [10, 20, 100, 200] }
    ]
  }}
  showDetections={true}
/>

Upload Components¶

components/upload/

Component	Purpose
`file-dropzone.tsx`	Drag-and-drop zone
`file-upload-popover.tsx`	Upload trigger popover
`selected-files-list.tsx`	Pending upload list

File Dropzone¶

<FileDropzone
  onFilesSelected={(files) => setFiles(files)}
  accept={{
    "image/*": [".png", ".jpg", ".jpeg"],
    "video/*": [".mp4", ".webm"],
    "application/pdf": [".pdf"]
  }}
  maxFiles={10}
/>

Organization Components¶

components/org/

Component	Purpose
`tutorial-progress-header.tsx`	Tutorial progress bar
`tutorial-cards-section.tsx`	Tutorial step cards grid

Component Conventions¶

File Naming¶

Kebab-case: session-logs-table.tsx
Descriptive: {domain}-{type}.tsx

Props Pattern¶

interface SessionsListTableProps {
  sessions: Session[];
  onDelete?: (id: string) => void;
  isLoading?: boolean;
}

Styling¶

Tailwind CSS classes
cn() utility for conditional classes
shadcn/ui design tokens

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

<div className={cn(
  "rounded-lg border p-4",
  isActive && "border-primary bg-primary/10"
)}>