Component Registry

Shipkit features are available as installable shadcn registry blocks. Add auth, payments, blog, docs, CMS, analytics, or any feature to a Next.js project with a single command.

The goal: start from bones (the upstream boilerplate) and install blocks until you reach full Shipkit parity.

Quick Start

1. Add the Shipkit registry

In your project's components.json, add the Shipkit registry:

{
  "registries": {
    "@shipkit": "https://shipkit.io/r/{name}.json"
  }
}

Bones ships with this entry already.

2. Install a block

npx shadcn add @shipkit/payments
npx shadcn add @shipkit/caching
npx shadcn add @shipkit/blog

Or install directly via URL:

npx shadcn add https://shipkit.io/r/payments.json

3. Fill in the env vars

Every integration block declares the env vars it reads. shadcn add appends them to .env.local with empty values and never overwrites a key you already have:

$ npx shadcn add @shipkit/caching
✔ Added the following variables to .env.local:
  + UPSTASH_REDIS_REST_URL
  + UPSTASH_REDIS_REST_TOKEN

Fill in the values and restart the dev server. The feature turns on when its keys are present (see feature flags).

If a file already exists in your project (for example features-config.ts or cn.ts in a Bones project), shadcn add asks before overwriting. Answer n to keep yours.

Available Blocks (36 items)

Core Feature Blocks

Block	Files	Description
auth	42	Auth.js v5 — OAuth, credentials, magic link, guest access
payments	31	Stripe, Lemon Squeezy, Polar — checkout, webhooks, subscriptions
dashboard	64	User dashboard — projects, teams, API keys, deployments, charts
blog	24	MDX blog with author profiles, categories, feed-style timeline
docs	12	Documentation system — sidebar, search, MDX rendering
admin	31	Role-based admin panel — users, payments, GitHub, integrations
settings	12	User settings — profile, appearance, account management
rbac	3	Role-based access control — permission service, hook, API
demo	93	Showcase pages — dashboard, mail, music, playground, forms, cards

Content & Marketing

Block	Files	Description
faq	3	Accordion FAQ page with optional Payload CMS integration
pricing	7	Pricing page with plan cards, features, testimonials content
legal	5	Privacy policy, terms of service, EULA, legal info (MDX)
changelog	6	Auto-generated changelog from GitHub commits and tags
contact	4	Contact form with Resend email and newsletter opt-in
waitlist	10	Pre-launch signup with hero, social proof, FAQ sections

CMS

Block	Files	Description
builder-io	11	Builder.io visual page builder — drag-and-drop components
cms-pages	11	Shared Payload + Builder.io catch-all with automatic fallback

Integrations

Block	Files	Description
email	6	Resend email — client, service, subscribe actions, newsletter form
feedback	4	User feedback dialog/popover with database storage
analytics	9	PostHog, Umami, DataFast, Google Analytics, GTM, Statsig
ai	15	SmolLM browser AI (WebGPU) + cloud AI (OpenAI, Anthropic)
github-connect	10	GitHub OAuth, repo creation, collaborators, download service
vercel-connect	13	Vercel OAuth, deploy triggers, webhooks, status tracking
storage	6	AWS S3 presigned uploads, file service, upload components
caching	4	Redis caching and rate limiting via Upstash

Shared Infrastructure

Installed automatically as dependencies of the blocks above.

Item	Type	Description
cn	registry:lib	Tailwind class merging (clsx + tailwind-merge)
routes-config	registry:lib	Centralized route definitions
features-config	registry:lib	Build-time feature flags from env vars

UI Components

Standalone components, also installable individually:

Component	Description
marquee	Infinite scrolling marquee (horizontal/vertical)
border-beam	Animated beam tracing a container border
retro-grid	Perspective grid background
shimmer-button	Button with rotating shimmer effect
dock	macOS-style dock with magnification
use-copy-to-clipboard	Clipboard hook with timeout reset
use-mobile	Mobile viewport detection hook

Roadmap (not yet available)

These exist in ShipKit's source but are not packaged as blocks yet. They are the next split, along with breaking auth and payments into one block per provider.

Block	Description
better-auth	Better Auth, the chosen default auth library (switch in progress)
clerk	Clerk auth provider and forms
payload	Full Payload CMS config, collections and admin panel
turnstile	Cloudflare Turnstile widget and verification
vercel-blob	Vercel Blob storage adapter
onboarding	Multi-step setup wizard

Block Details

FAQ

The simplest block — good for validating your registry setup.

npx shadcn add @shipkit/faq

Installs to:

• app/(app)/faq/page.tsx — Server component with accordion layout
• app/(app)/faq/loading.tsx — Loading skeleton
• content/faq/faq-content.tsx — Static FAQ content (8 questions)

Dependencies: accordion (shadcn), cn

The page loads FAQs from Payload CMS when available, falling back to the static content file. Edit faq-content.tsx to customize questions.

Docs

Full documentation system powered by MDX.

npx shadcn add @shipkit/docs

Installs to:

• app/docs/ — Layout, page, loading, not-found, styles
• app/docs/_components/ — Sidebar, header, search dialog
• app/api/docs/search/ — Search API route (optional AI-powered answers)
• lib/docs.ts — Doc utilities (slug resolution, navigation, search)
• hooks/use-docs-search.ts — Client-side search hook with debouncing
• server/services/docs-search.ts — Server-side search service

Dependencies: next-mdx-remote, remark-gfm, gray-matter, zod

Place .mdx files in a docs/ directory at your project root. The system auto-discovers files and builds sidebar navigation from the directory structure.

Blog

MDX-powered blog with author profiles and feed-style timeline.

npx shadcn add @shipkit/blog

Installs to:

• app/blog/ — Listing, post pages, categories, author pages
• components/modules/blog/ — 10 components (hero, post, authors, TOC, skeletons)
• components/layouts/blog-sidebar.tsx — Sticky sidebar with search
• lib/blog.ts — Blog utilities (post loading, category extraction)
• config/blog-authors.ts — Author configuration
• config/nextjs/with-blog.ts — Next.js config wrapper
• styles/blog.css — Timeline and sidebar styles

Dependencies: gray-matter, next-mdx-remote, remark-gfm, lucide-react

Place .mdx posts in src/content/blog/. Add withBlog() to your next.config.ts to auto-detect blog content and set the NEXT_PUBLIC_HAS_BLOG flag.

Builder.io

Visual page builder for no-code content editing.

npx shadcn add @shipkit/builder-io

Installs to:

• app/builder.io/[...slug]/page.tsx — Standalone catch-all route
• lib/builder-io/builder-io.tsx — RenderBuilderContent component
• builder-registry.ts — Component registration (Hero, Stats, CTA)
• components/modules/builder/ — 5 Builder.io block components
• config/nextjs/with-builder.ts — Next.js config wrapper
• styles/builder-io.css — Builder.io overrides

Dependencies: @builder.io/react, @builder.io/sdk, @builder.io/dev-tools

Setup: Sign up at builder.io, set NEXT_PUBLIC_BUILDER_API_KEY in .env.local. Wrap your Next.js config with withBuilderConfig().

CMS Pages

Shared catch-all route for Payload CMS and Builder.io coexistence.

npx shadcn add @shipkit/cms-pages

Installs to:

• app/(app)/[...slug]/page.tsx: unified catch-all handler (lives under (app) so the sync root layout can send a real 404)
• app/(cms)/layout.tsx — Conditional Payload layout (tree-shakes when disabled)
• app/(cms)/payload-root-layout.tsx — Payload CSS/config loader
• app/(cms)/payload-blocks.tsx — Block renderer (Hero, Content, Features, Testimonials)
• app/(cms)/ — 4 Payload block components
• types/blocks.ts — Block type definitions

How routing works:

Request to /<any-path>
  -> (app)/[...slug] catches it
  -> Checks Payload CMS database for matching page
  -> If not found, falls back to Builder.io API
  -> If neither has content, returns 404

Payload is checked first (higher priority). Both CMS systems can be independently enabled/disabled via feature flags. Installing this block automatically pulls in the builder-io block.

Auth

Full authentication system with multi-provider support.

npx shadcn add @shipkit/auth

Installs to:

• app/(authentication)/ — Sign-in, sign-up, forgot/reset password, error pages
• app/(authentication)/_components/ — Auth form, credentials, magic link, guest, OAuth buttons
• app/api/auth/[...nextauth]/route.ts — NextAuth API route
• server/auth.ts — NextAuth configuration with Drizzle adapter
• server/auth-js/ — Provider configs, utilities
• server/actions/auth.ts — Server actions (sign in, sign up, password reset)
• server/services/ — Auth service, user service
• server/db/schema.ts — Drizzle schema (users, accounts, sessions, verification tokens)
• hooks/ — Auth redirect hooks
• lib/schemas/ — Zod validation schemas
• types/ — User types, NextAuth type augmentation
• components/buttons/ — Sign-in button, GitHub OAuth button

Dependencies: next-auth@5, @auth/drizzle-adapter, bcryptjs, zod, zsa

Setup:

1. Run npx auth secret to generate AUTH_SECRET
2. Set DATABASE_URL for PostgreSQL
3. Run Drizzle migrations: npx drizzle-kit generate && npx drizzle-kit migrate
4. Configure at least one provider (e.g., AUTH_GITHUB_ID + AUTH_GITHUB_SECRET)
5. Or enable guest access: ENABLE_AUTH_GUEST=true

Legal

npx shadcn add @shipkit/legal

Privacy policy, terms of service, EULA, and legal info as MDX pages with shared layout and header navigation. Customize content in each .mdx file after installation.

Changelog

npx shadcn add @shipkit/changelog

Auto-generates changelog from your GitHub repo's commits and tags. Set GITHUB_REPO_OWNER and GITHUB_REPO_NAME env vars. Timeline view with individual entry pages. Cached for 1 hour via ISR.

Contact

npx shadcn add @shipkit/contact

Contact page with animated background, email card, and React Hook Form. Sends emails via Resend (RESEND_API_KEY). Includes newsletter opt-in.

Waitlist

npx shadcn add @shipkit/waitlist

Pre-launch waitlist with hero, social proof, FAQ, and email signup. Stores entries in the database. Optional Resend email notifications.

Admin

npx shadcn add @shipkit/admin

Role-based admin dashboard. Set ADMIN_EMAIL (comma-separated) to grant access. Sections: users, payments, GitHub, integrations, feedback, waitlist, CMS. Requires auth block.

Settings

npx shadcn add @shipkit/settings

User settings with profile editing, appearance/theme picker, account deletion, and provider disconnect. Requires auth block.

Email

npx shadcn add @shipkit/email

Resend email integration. Set RESEND_API_KEY to enable. Includes subscribe form, audience management, and email utility functions.

Feedback

npx shadcn add @shipkit/feedback

User feedback dialog and popover components. Stores in database, optionally emails via Resend.

Analytics

npx shadcn add @shipkit/analytics

Six providers, all behind feature flags. Set any env var to enable: NEXT_PUBLIC_POSTHOG_KEY, NEXT_PUBLIC_UMAMI_WEBSITE_ID, NEXT_PUBLIC_DATAFAST_ID, NEXT_PUBLIC_GA_ID, NEXT_PUBLIC_GTM_ID, NEXT_PUBLIC_STATSIG_CLIENT_KEY. Add <AnalyticsProvider /> to your root layout.

Pricing

npx shadcn add @shipkit/pricing

Pricing page with plan cards, features showcase, and testimonials. Customize plans in content/pricing/pricing-content.ts.

Payments

npx shadcn add @shipkit/payments

Unified payment system. Each provider auto-enables via env vars:

• Stripe: STRIPE_SECRET_KEY + STRIPE_PUBLISHABLE_KEY
• Lemon Squeezy: LEMONSQUEEZY_API_KEY + LEMONSQUEEZY_STORE_ID
• Polar: POLAR_ACCESS_TOKEN

Includes webhook handlers, checkout flows, subscription management, and buy buttons.

Caching

npx shadcn add @shipkit/caching

Redis caching and rate limiting via Upstash. Set UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN.

Storage

npx shadcn add @shipkit/storage

AWS S3 file uploads with presigned URLs. Set AWS_S3_BUCKET_NAME, AWS_S3_REGION, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY. Includes file upload components.

Dashboard

npx shadcn add @shipkit/dashboard

Full user dashboard with projects, teams, API keys, deployments, downloads, tools, revenue chart, and stats cards. Includes sidebar, service layer, and server actions. Requires auth block.

RBAC

npx shadcn add @shipkit/rbac

Role-based access control. Server-side rbacService.hasPermission(userId, resource, action) and client-side usePermission() hook. Includes /api/permissions/check endpoint.

AI

npx shadcn add @shipkit/ai

Browser-based SmolLM via WebGPU (no server, no API key) and cloud AI with OpenAI/Anthropic. Set OPENAI_API_KEY or ANTHROPIC_API_KEY for cloud features. Includes demo components and WebGPU detection.

GitHub Connect

npx shadcn add @shipkit/github-connect

GitHub integration for repo management. Requires AUTH_GITHUB_ID + AUTH_GITHUB_SECRET. Provides repo creation, collaborator invitations, download service, and repo availability checks.

Vercel Connect

npx shadcn add @shipkit/vercel-connect

Vercel deployment integration. Set VERCEL_TOKEN and VERCEL_TEAM_ID. OAuth connect flow, deploy triggers, webhook receiver, deployment status tracking, and deploy button components.

Demo

npx shadcn add @shipkit/demo

93 files of showcase demos: dashboard, mail client, music player, AI playground, forms, cards, file browser, authentication, pricing, landing page, and tRPC. Great for exploring UI patterns.

Route Groups

All blocks install into the (app) route group by default. This is required for compatibility with Payload CMS, which uses a separate (cms) route group.

app/
├── (app)/           <- Feature blocks install here
│   ├── [...slug]/   <- Shared Payload + Builder.io catch-all
│   ├── faq/
│   ├── docs/
│   ├── blog/
│   ├── builder.io/
│   └── (authentication)/
├── (cms)/       <- Payload admin + REST API only
│   ├── cms/         <- Payload admin panel
│   └── cms-api/     <- Payload REST API
└── layout.tsx

For Maintainers

Source & Build

The registry source is registry.json at the project root. Running npx shadcn build reads this file and generates individual JSON files in public/r/.

# Build registry
bun run build:registry    # or: npx shadcn build

# Output
public/r/
├── registry.json         # Auto-generated index
├── faq.json              # Per-block JSON with embedded file contents
├── auth.json
└── ...

Adding a New Block

1. Add an entry to registry.json:

{
  "name": "my-block",
  "type": "registry:block",
  "title": "My Block",
  "description": "What it does.",
  "categories": ["shipkit", "my-category"],
  "dependencies": ["some-npm-package"],
  "registryDependencies": ["cn", "button"],
  "files": [
    {
      "path": "src/app/(app)/my-route/page.tsx",
      "type": "registry:page",
      "target": "~/app/(app)/my-route/page.tsx"
    }
  ],
  "docs": "Setup instructions shown after installation."
}

2. Run bun run build:registry to generate the output files.

3. Test locally (see Local Testing below).

Local Testing

To test registry blocks locally before deploying:

Option A: Use the dev server

# Terminal 1
bun dev

# Terminal 2
npx shadcn add http://localhost:3000/r/faq.json

Option B: Quick static server (no full Next.js build needed)

# Terminal 1
npx serve public/r -p 5555

# Terminal 2
npx shadcn add http://localhost:5555/faq.json

Resolving custom registry dependencies locally:

Direct URL installs (http://localhost:.../faq.json) will fail if the block has registryDependencies that reference custom items like cn or routes-config — shadcn tries to resolve those from its default registry at shadcn.com.

To fix this, add a local Shipkit registry to your test project's components.json:

{
  "registries": {
    "@shipkit": "http://localhost:3000/r/{name}.json"
  }
}

Then install via the registry prefix:

npx shadcn add @shipkit/faq

This resolves all internal deps (cn, routes-config, etc.) through the local server. Standard shadcn deps (accordion, button, etc.) still resolve from shadcn.com as normal.

Tip: If you just want to verify file installation and the dependencies already exist in the project, the direct URL approach works fine — dependency resolution is only needed for fresh consumer projects.

File Entry Types

Type	Use for
registry:page	Route pages (page.tsx)
registry:component	React components, layouts, loading states
registry:hook	React hooks
registry:lib	Utilities, configs, server code, types, API routes
registry:style	CSS files

Target Paths

• ~ resolves to the project root (relative to components.json)
• Always include (app) for routes: ~/app/(app)/my-route/page.tsx
• Non-route files keep their path: ~/lib/my-util.ts, ~/hooks/my-hook.ts
• path is the source location in Shipkit, target is where it installs in the consumer project

Registry Dependencies

• Internal deps (defined in the same registry): cn, routes-config, features-config
• shadcn deps (resolved from shadcn.com): accordion, button, card, input, etc.
• Consumer projects resolve internal deps by adding the Shipkit registry to their components.json