Waveup
Try Demo

Components

ShiftKit includes a comprehensive set of UI components built on shadcn/ui and Radix primitives.

UI Components

All base components live in src/components/ui/. These are standard shadcn/ui components — see the shadcn/ui docs for full API reference.

Included components: Alert, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Chart, Checkbox, Collapsible, Dialog, Drawer, Dropdown Menu, Field, Input, Input Group, Label, Popover, Safe Image, Select, Separator, Sheet, Sidebar, Skeleton, Sonner (toast), Switch, Table, Tabs, Textarea, Toggle, Toggle Group, Tooltip.

Layout Components

  • PageLayout (src/components/layout/page-layout.tsx) — Standard page wrapper with consistent padding and max-width
  • ResponsiveButton (src/components/layout/responsive-button.tsx) — Button that adapts label/icon for mobile vs desktop

Form Components

  • CustomForm (src/components/forms/CustomForm.tsx) — Form wrapper with react-hook-form + zod validation
  • CustomInputField — Text input with label, error state, and description
  • CustomSelectField — Select dropdown with the same pattern
  • CustomPasswordField — Password input with show/hide toggle

Demo Components

  • DemoProvider (src/lib/demo-context.tsx) — Context provider for demo mode with mock auth
  • DemoToast (src/components/demo-toast.tsx) — Persistent toast indicating demo mode

Adding New Components

Use the shadcn CLI to add more components:

npx shadcn@latest add [component-name]

For custom components, follow the existing pattern: TypeScript, proper prop interfaces, and Tailwind for styling.