Shipkit
DocsFeaturesPricing
DocsFeaturesPricing

Command Palette

Search for a command to run...

Shipkit DocumentationBuild memory optimizationDevelopment GuideEnvironment VariablesError HandlingFile StructureMiddlewareRebranding Guide

Vercel Deployment Checks

Development GuideCLIDependency UpdatesDevToolsFeature FlagsAI PromptsSetup RequirementsSupply chaintRPCWeb Workers

FeaturesAIAnalytics IntegrationAuthenticationCMSDatabaseEmailHapticsPaymentsComponent RegistryStorageUIVisual BuilderWaitlist Feature

Quick StartDeploymentEnvironment VariablesFile StructureSetup Wizard

Caching & Rate LimitingContent ManagementError HandlingMarkdown and MDXMiddlewareProxy-Safe Server ActionsRebranding GuideWebhook Security Implementation GuideMulti-Zone ArchitectureVercel Deployment

IntegrationsPayload CMSDataFast Analytics IntegrationGoogle Analytics IntegrationGoogle Tag Manager IntegrationPostHogStatSig IntegrationUmami Analytics IntegrationAuth.js IntegrationBetter AuthClerkStack Auth IntegrationSupabase Authentication IntegrationBuilder.io IntegrationPayload CMS IntegrationAWS S3 IntegrationResend Email IntegrationUpstash Redis IntegrationVercel Blob IntegrationLemon SqueezyPolarStripe

API RoutesComponentsAPI Route SnippetsAuthentication SnippetsComponent SnippetsForm Handling SnippetsSnippets Introduction

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/:

ComponentPurpose
LinkWithTransitionNext.js Link with view transitions
ModalResponsive modal (Dialog on desktop, Drawer on mobile)
ErrorBoundaryComponent-level error catching
ErrorToastError notification display
PageHeaderConsistent page headers
SectionContent section wrapper
ProseTypography wrapper for rich text
MasonryMasonry grid layout
JsonLdSEO structured data
WebVitalsCore 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/:

DirectoryContains
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