Components

Shipkit's component library follows an atomic design pattern: primitives, blocks, modules, and layouts. Everything is built on shadcn/ui and Radix UI for accessibility.

UI Components (shadcn/ui)

125+ components in src/components/ui/. These are the standard shadcn/ui components built on Radix UI with Tailwind CSS styling and CVA variants.

Commonly used:

• Button - Variants: default, destructive, outline, secondary, ghost, link. Sizes: default, sm, lg, icon.
• Card - Container with header, content, footer sections
• Dialog / Drawer - Modal dialogs (Dialog on desktop, Drawer on mobile)
• Input / Textarea - Form inputs
• Select / Combobox - Dropdowns
• Table - Data tables
• Tabs - Tab navigation
• Toast - Notifications
• Badge - Status indicators

Adding New Components

bunx shadcn@latest add [component-name]

Components are added to src/components/ui/ and can be customized freely.

Primitives

Base building blocks in src/components/primitives/:

Component	Purpose
LinkWithTransition	Next.js Link with view transitions
Modal	Responsive modal (Dialog on desktop, Drawer on mobile)
ErrorBoundary	Component-level error catching
ErrorToast	Error notification display
PageHeader	Consistent page headers
Section	Content section wrapper
Prose	Typography wrapper for rich text
Masonry	Masonry grid layout
JsonLd	SEO structured data
WebVitals	Core Web Vitals reporter

Blocks

Complex feature blocks in src/components/blocks/:

• AI demo components (SmolLM WebGPU, cloud demos)
• Animated testimonials
• Background effects (beams, boxes)
• Bento grid layouts
• Infinite slider / carousel

Modules

Feature-specific modules in src/components/modules/:

Directory	Contains
auth/	Auth forms, provider buttons
blog/	Blog post display, sidebar
builder/	Builder.io components (hero, CTA, stats)
deploy/	Deployment UI
devtools/	Tailwind indicator, font selector
onboarding/	Setup wizard
payments/	Payment UI components
search/	Search functionality
sidebar/	Sidebar navigation
user/	User account UI

Layouts

Page layouts in src/components/layouts/:

• DefaultLayout - Standard page wrapper
• MainLayout - Primary app layout
• BlogSidebar - Blog-specific sidebar layout

Loaders

Loading animations in src/components/loaders/:

• LoaderAtoms - Atomic particle animation
• LoaderBouncingShapes - Bouncing shapes
• LoaderLines - Line-based loader
• LoaderTetris - Tetris block animation

Conventions

• Named exports only (no default exports)
• React.forwardRef for ref forwarding
• AsChild pattern via Radix Slot for composition
• CVA (class-variance-authority) for variant styling
• TypeScript interfaces for all props
• Arrow functions for components, function keyword for utilities