Installation

Prerequisites

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

Initialize Your Project

Optional, but recommended before your first feature. This scaffolds the shared Prisma client, auth stub, and shadcn/ui setup every primitive depends on:

npx feature101@latest init

Sets up shadcn/ui (Base UI + the Vega preset), your Prisma client, and .env.example in one step. Skipping this is fine too — addbootstraps the same shared layer automatically the first time it's needed.

Add a Feature

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

npx feature101@latest add follow

Generated File Structure

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

Database Connection

Set your database connection string in .env:

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

npx prisma migrate dev

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 { FollowButton } from "@/features/follow";

export default function ProfilePage() {
  return (
    <article>
      <h1>Jane Doe</h1>
      <p>Profile content...</p>

      <FollowButton targetUserId="user_xyz" showCount={true} />

    </article>
  );
}

Manual Installation

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

Troubleshooting