Full-stack features.Copy. Paste. Ship.
One command. A complete feature — component, hook, store, server action, database model — all of it, in your Next.js repo. You own every line.
// drop it in app/layout.tsx
↑ interactive — tap send to ask again
complete vertical slice
from zero to working
of boilerplate, gone
nothing added to bundle
Anatomy of a feature
What one command gives you
Each primitive is a complete vertical slice — from UI to database. Not just a component.
Component
Ready-to-use React component
<FollowButton targetUserId= "user_xyz" showCount />
Hook
Optimistic update logic
const { isFollowing, followerCount,
toggle } = useFollow(...)Zustand Store
Client-side state management
create<FollowState>((set) => ({
toggle: async () => ...
}))Server Action
"use server" mutations
"use server"
async function
toggleFollow(
targetUserId
) { ... }Prisma Model
Prisma schema
model Follow {
id String @id
followerId
String
}Component → Hook → Store → Server Action → Database Model
Why feature101
Stop rebuilding the same patterns
The manual way
The feature101 way
npx feature101@latest add followimport { FollowButton } from "@/features/follow"
<FollowButton
targetUserId="user_xyz"
showCount={true}
/>Philosophy
Built differently, on purpose
Every design decision is intentional. Here's what separates feature101 from yet another component library.
You own every line
Code is copied directly into your project. No black-box dependencies, no hidden runtime, no version surprises.
shadcn/ui native
Features are built on shadcn/ui components and the CLI installs them for you. Polished UI with zero extra setup.
Prisma-powered
PostgreSQL by default. Prisma's driver-adapter architecture means MySQL, SQLite, or any other supported database is a schema change away — not a rewrite.
Zero magic
No hidden abstractions. Every line that runs is a line you can read. Customize, delete, or rewrite anything.
The registry
Full-stack primitives, ready to ship
Component, hook, store, server action, and Prisma model — in every primitive. Copy it, own it, ship it.
How it works
Three steps. Ship in seconds.
Pick a feature
Browse the registry for the primitive you need.
Run one command
The CLI scaffolds all files and installs dependencies automatically.
npx feature101@latest add followImport and use
The code is yours. Import the component and start shipping.
import { FollowButton } from "@/features/follow";
export default function Profile() {
return (
<FollowButton
targetUserId="user_xyz"
showCount={true}
/>
);
}Polished UI, automatically
Every feature declares the shadcn/ui components it needs. The CLI installs them — production-grade, accessible UI without any extra setup.
FAQ
Common questions
Everything you need to know before running the first command.
Ready to ship?
Your first feature is 30 seconds away.
One command. No black-box dependencies. You own every line of code.