Installation

Get feature101 set up and add your first feature in under 30 seconds.

Prerequisites

feature101 works inside any existing Next.js project. Make sure you have:

Next.js 14+ with App Router enabled

TypeScript configured in your project

A database with a connection string (PostgreSQL recommended)

Add a Feature

Run the CLI with the feature slug you want to install:

npx feature101@latest add like

What happens when you run this

Copies feature files

All source files are written into features/like/ in your project. You own every file immediately.

Installs npm dependencies

Runtime deps (@prisma/client, zustand, etc.) and dev deps (prisma, @types/pg) are installed automatically.

Installs shadcn/ui components

If the feature uses shadcn components (e.g. Button), the CLI runs npx shadcn@latest add [component] for you.

Merges Prisma model

The feature's model block is appended to your existing prisma/schema.prisma. Your existing models are untouched.

Pushes schema to database

If DATABASE_URL is set in .env, runs prisma db push to sync your schema. Skipped silently if the env var is missing.

Generated File Structure

Running npx feature101@latest add like creates this complete file structure in your project:

Generated output

▸features/like/

├─index.ts— barrel export

├─like.types.ts— TypeScript interfacesclient

├─like.store.ts— Zustand storezustand

├─like.hooks.tsx— optimistic updatesclient

├─like.actions.ts— DB mutationsserver

▸components/

├─LikeButton.tsx— ready-to-use componentclient

▸lib/

├─prisma.ts— singleton (shared)

▸prisma/

├─schema.prisma— Like model merged inprisma

├─prisma.config.ts— Prisma + dotenv config

Database Connection

Set your database connection string in .env:

DATABASE_URL=postgresql://user:password@localhost:5432/mydb

PostgreSQL by default, any DB supported

Features ship with @prisma/adapter-pg pre-configured for PostgreSQL. Since it's Prisma under the hood, you can adapt prisma.config.ts to MySQL, SQLite, MongoDB, Neon, Supabase, PlanetScale, or any other Prisma-supported database.

DATABASE_URL must exist before the CLI runs

The CLI only runs prisma db push if DATABASE_URL is present in .env at install time. If you add it after, run manually — or your app will throw table does not exist at runtime:

npx prisma db push

Schema Merging

If you already have a prisma/schema.prisma, the CLI appends the new model block — it does not overwrite your file. Your existing models, datasource, and generator config are preserved.

If no schema exists yet, a new one is created with the default PostgreSQL datasource config.

Installing multiple features is safe — each model is appended independently, and the CLI won't add a model that already exists.

Usage

Import the component from the feature's barrel export and drop it anywhere in your app:

import { LikeButton } from "@/features/like";

export default function PostPage() {
  return (
    <article>
      <h1>My Post</h1>
      <p>Post content...</p>

      <LikeButton
        userId="user_123"
        targetId="post_789"
        targetType="post"
      />
    </article>
  );
}

Manual Installation

Prefer copy-paste? Every feature page has a Code tab with all files and syntax highlighting. To manually wire a feature:

1Copy all files from the Code tab into features/[slug]/ in your project

2Install the npm deps listed at the top of the feature page: npm install [deps]

3If the feature uses shadcn/ui, run npx shadcn@latest add [component]

4Copy the Prisma model block into prisma/schema.prisma

5Run npx prisma db push to sync your schema

Troubleshooting

Error: table does not exist

Cause: DATABASE_URL wasn't set when the CLI ran, so prisma db push was skipped.

Fix: Add DATABASE_URL to .env, then run npx prisma db push.

shadcn/ui component not found

Cause: shadcn/ui hasn't been initialized in your project yet.

Fix: Run npx shadcn@latest init, then re-run the feature install command.

prisma: command not found

Cause: The prisma dev dependency wasn't installed correctly.

Fix: Run npm install -D prisma, then npx prisma db push.

Cannot find module '@/features/like'

Cause: Your tsconfig.json doesn't have the @/* path alias configured.

Fix: Add "@/*": ["./*"] to the paths section of your tsconfig.json.

Ready to browse features?

Browse the feature registry — pick your next primitive and ship it in 30 seconds.

Introduction Like

Introduction