Not UI components — full-stack features

Full-stack features.Copy. Paste. Ship.

Drop complete features into your Next.js app with one command. You own every line.

Get StartedBrowse Features
2 features live·Next.js · Prisma · Zustand·You own every line
Built for:Next.js 14+TypeScriptPrismaZustandshadcn/ui
terminal
$▋
likefollowcommentfeednotificationspost-createcartcheckoutproduct-listorder-historyproduct-detailsend-messagetyping-indicatormark-readmessage-listtask-createdrag-dropfilterassign-usertask-updateavailabilitybooking-createdate-selectbooking-cancelvideo-playwatchlistwatch-historyvideo-listsearchupload-filepaginationsortlikefollowcommentfeednotificationspost-createcartcheckoutproduct-listorder-historyproduct-detailsend-messagetyping-indicatormark-readmessage-listtask-createdrag-dropfilterassign-usertask-updateavailabilitybooking-createdate-selectbooking-cancelvideo-playwatchlistwatch-historyvideo-listsearchupload-filepaginationsort
8 files1 command

complete vertical slice

~250 lines30 seconds

from zero to working

~2 hoursyou own it

of boilerplate, gone

0 runtimezero deps

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

<LikeButton
  userId="user_123"
  targetId="post_123"
/>

Hook

Optimistic update logic

const { isLiked, count,
  toggle } = useLike(...)

Zustand Store

Client-side state management

create<LikeState>((set) => ({
  toggle: async () => ...
}))

Server Action

"use server" mutations

"use server"
async function toggleLike(
  userId, targetId) { ... }

Prisma Model

Prisma schema

model Like {
  id     String @id
  userId String
}

Component → Hook → Store → Server Action → Database Model

Why feature101

Stop rebuilding the same patterns

The manual way

like.types.ts~25 lines
like.model.ts~30 lines
like.actions.ts~45 lines
like.store.ts~40 lines
like.hooks.ts~35 lines
LikeButton.tsx~50 lines
lib/prisma.ts~15 lines
schema.prisma~10 lines
8 files
~250 lines
~2 hours

The feature101 way

npx feature101@latest add like
import { LikeButton } from "@/features/like"

<LikeButton
  userId="user_123"
  targetId="post_123"
  targetType="post"
/>
1 command
30 seconds
You own it
Save ~2 hours

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.

DB-agnostic

Prisma handles the ORM layer. Use PostgreSQL, MySQL, SQLite, or any other Prisma-supported database.

Zero magic

No hidden abstractions. Every line that runs is a line you can read. Customize, delete, or rewrite anything.

Roadmap

Features for every use case

From social engagement to ecommerce checkout. Each category ships with production-ready primitives.

Coming soon

Ecommerce

product-listproduct-detailcartcheckoutorder-history
Coming soon

Booking

availabilitydate-selectbooking-createbooking-cancel
Coming soon

Productivity

task-createtask-updatedrag-dropfilterassign-user
Coming soon

Messaging

send-messagemessage-listmark-readtyping-indicator
Coming soon

Video

video-listvideo-playwatchlistwatch-history
Coming soon

Universal

upload-filesearchpaginationfiltersort

How it works

Three steps. Ship in seconds.

1

Pick a feature

Browse the registry for the primitive you need.

likefollowcommentfeednotifications
2

Run one command

The CLI scaffolds all files and installs dependencies automatically.

npx feature101@latest add like
3

Import and use

The code is yours. Import the component and start shipping.

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

export default function Post() {
  return (
    <LikeButton
      userId="user_123"
      targetId="post_123"
      targetType="post"
    />
  );
}
shadcn/ui native

Polished UI, automatically

Every feature declares the shadcn/ui components it needs. The CLI installs them — production-grade, accessible UI without any extra setup.

buttonbadgeavatardialogdropdown-menutabscardskeleton
shadcnComponents: ["button"] // declared in feature config
// CLI auto-runs → npx shadcn@latest add button

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.

Start ShippingBrowse FeaturesView on npm