UI

Shadcn/UI + Tailwind CSS. All Shadcn components are available, plus Shipkit-specific additions.

View Transitions

Use the Link component from Shipkit for automatic view transitions:

import { Link } from "@/components/primitives/link-with-transition";

<Link href="/">Home</Link>;

Controlled by behavior.pageTransitions in src/config/site-config.ts.

Theme

Light/dark mode with system detection. Controlled by feature flags:

  • LIGHT_MODE_ENABLED — on by default (DISABLE_LIGHT_MODE=true to remove)
  • DARK_MODE_ENABLED — on by default (DISABLE_DARK_MODE=true to remove)
import { ThemeToggle } from "@/components/ui/theme"; // light/dark toggle
import { ThemeChooser } from "@/components/ui/theme"; // light/dark/system picker

Dynamic Slots

Intercepting routes are auto-handled. Create the route, Shipkit renders it as a modal/slot — no layout code changes needed.

Components

Shipkit includes all Shadcn/UI components plus custom blocks in src/components/blocks/ (nav, sidebar, team switcher, etc.).

For a full component reference, see Components.

Registry

Custom Shipkit UI components are available as installable shadcn registry items: marquee, border-beam, retro-grid, shimmer-button, dock, and hooks like use-copy-to-clipboard and use-mobile. Full feature blocks (auth, blog, docs, etc.) are also available.

See Component Registry for installation instructions.

Key Directories

PathContents
src/components/ui/Shadcn/UI base components
src/components/blocks/Composed UI blocks (nav, sidebar, etc.)
src/components/buttons/Auth, payment, and action buttons
src/components/primitives/Low-level primitives (Link, etc.)
src/components/providers/Context providers (theme, query, etc.)