easy-shadcneasy/shadcn
✦ A field manual for shadcn/ui ✦

the easy wayto shadcn.

Hand-stitched wrappers over shadcn/ui that swap nested children for flat props. Eighty percent of your UI ships with one tag. The other twenty — drop down to the primitive. No lock-in. No black box.

Read the field manual→Browse components★ Star on GitHub
~/your-app · zsh
# 1. configure once
$ pnpm dlx shadcn@latest init

# 2. install any component
$ pnpm dlx shadcn@latest add @easy-shadcn/card

# 3. ship. it's yours now.
$

↑ paste into any shadcn-ready repo

Flat propsZero ceremonyOwned by youStrictly typedMIT licensedEighty / twenty by designshadcn-nativeTree-shakableNo render-prop carnivalFlat propsZero ceremonyOwned by youStrictly typedMIT licensedEighty / twenty by designshadcn-nativeTree-shakableNo render-prop carnival

░░ By the numbers

A small library on purpose. Each component earns its way in by collapsing a recurring shadcn pattern into something you'd type without thinking.

06
components
and growing
80/20
by design
no slot abuse
01
line install
shadcn CLI
100%
yours
MIT, copy & own

❉ Section II · The Demonstration

Less wrapping.
More shipping.

The same card. Same behavior. Same primitive underneath. One reads like a poem. The other reads like assembly instructions for a bookshelf.

Beforeshadcn/ui · raw13 ln
1<Card>
2  <CardHeader>
3    <CardTitle>New invoice</CardTitle>
4    <CardDescription>Due in 14 days.</CardDescription>
5    <CardAction>
6      <Button variant="ghost">Edit</Button>
7    </CardAction>
8  </CardHeader>
9  <CardContent>Net 30 · $1,240.00</CardContent>
10  <CardFooter>
11    <Button>Send</Button>
12  </CardFooter>
13</Card>
Aftereasy-shadcn · composed7 ln
1<Card
2  title="New invoice"
3  description="Due in 14 days."
4  action={<Button variant="ghost">Edit</Button>}
5  footer={<Button>Send</Button>}
6>Net 30 · $1,240.00</Card>
7

Reduction: 13 → 7 lines · same primitives

Need the other 20%? Use the primitive →

✦ Section III · The Catalogue

Six pieces.
Each earned its place.

We don't ship a component until it collapses a real pattern. If you've copy-pasted a shadcn structure three times this month, it belongs here.

  1. 01

    Card

    Flat slots for title, description, action and footer.

    @easy-shadcn/card
  2. 02

    Tabs

    Items array in. Tabs out. Heterogeneous? Use the primitive.

    @easy-shadcn/tabs
  3. 03

    Async Button

    Returns a Promise? It handles loading, icons and anti-flash.

    @easy-shadcn/async-button
  4. 04

    Modal

    Imperative alert & confirm, ready for command palettes.

    @easy-shadcn/modal
  5. 05

    Calendar

    Three-view month/year navigation. No more native dropdowns.

    @easy-shadcn/calendar
  6. 06

    Date Picker

    Single, multiple, range, inline-input — one component.

    @easy-shadcn/date-picker

✦ The Manifesto · Three rules we won't break

The eighty / twenty
principle, in writing.

IRule 1 / 3

Flat props, not nested children.

One prop per slot. No more <CardHeader><CardTitle> ladders. Eighty percent of layouts ship with one tag.

IIRule 2 / 3

Composition stays primitive.

Compose layer never grows render props or slot objects. Need the other twenty? Drop down to components/ui/* — the door is unlocked.

IIIRule 3 / 3

Your code, your repo.

Installed through the shadcn CLI. Every component lives inside your project, fully owned and trivially patched. No black box.

"Every prop is a debt. We pay it back by leaving the primitive unlocked — so the twenty percent of users who need more don't have to fight us for it."─ The library author, in the AGENTS.md

✦ Last Page · Take it home

Stop wrapping.
Start shipping.

$ installcopy ↗
$ pnpm dlx shadcn@latest add @easy-shadcn/card