Shipkit
DocsFeaturesPricing
DocsFeaturesPricing

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