Installation

Feature Kits ships as a pnpm workspace and as a shadcn registry (@feature-kit/*) for external Next.js apps.

Registry (@feature-kit)Copy Anchor Link

Install kits with the shadcn CLI after configuring your registry namespace:

npx shadcn@latest add @feature-kit/theme
npx shadcn@latest add @feature-kit/form

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "utils": "@/lib/utils",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@feature-kit": "https://feature-kits.vercel.app/r/{name}.json"
  }
}

Each kit resolves to https://feature-kits.vercel.app/r/<kit>.json (or your deployment origin). See kit docs for registry item names: form, data-table, dashboard-shell, layout, breadcrumb, auth, theme, uploader.

Clone the repositoryCopy Anchor Link

git clone https://github.com/jayantrohila57/feature-kit.git
cd feature-kit
pnpm install
pnpm dev

The docs playground runs at http://localhost:3000/docs.

Add workspace packagesCopy Anchor Link

Add the packages your screen uses to the consuming app's package.json:

{
  "dependencies": {
    "data-table": "workspace:*",
    "form": "workspace:*",
    "layout": "workspace:*",
    "ui": "workspace:*",
    "uploader": "workspace:*"
  }
}

Only add the packages you need. Feature packages declare their own workspace dependencies.

Configure Next.jsCopy Anchor Link

When a Next.js app consumes source from workspace packages, include every imported feature package in transpilePackages:

const nextConfig = {
  transpilePackages: ["data-table", "form", "layout", "ui", "uploader"],
}

export default nextConfig

Use the actual package names from your imports. Do not copy internal apps/web aliases into a separate application.

Load stylesCopy Anchor Link

Import the shared UI stylesheet once from the application root:

@import "ui/globals.css";

Feature kits rely on the shared semantic tokens. Loading separate copies of the stylesheet per feature can create inconsistent themes.

Verify the setupCopy Anchor Link

pnpm check-types
pnpm lint
pnpm build

Then confirm that a kit imports without a module-resolution error and that the required providers are mounted. Continue with Providers and Theming.

Package exportsCopy Anchor Link

Use package-root exports for consumer code:

import { FormKit } from "form"
import { DataTable } from "data-table"
import { FormSection } from "layout"

For a complete export list, inspect the relevant package package.json and its src/index.ts. Internal source paths are implementation details unless a package explicitly exposes a subpath.