Design & UX Skill
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns…
$15
Shadcn UI
Build accessible, customizable UI components using shadcn/ui with Radix primitives, Tailwind…
Build accessible, on-brand UI with shadcn/ui: Radix primitives, Tailwind CSS, and class-variance-authority assembled with a copy-paste architecture where components live in your repo, not node_modules. You own every component, so upstream breaking changes can't touch you and unused components never bloat your bundle. From theme tokens to RSC boundaries, it gives you a disciplined path to ship a consistent component library fast.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Design & UX
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
shadcn/ui copies the component source into your repo, which means ownership and accountability land there too. The skill assesses what exists, adds only what is needed, and locks brand theming into HSL tokens so rebrands never become rewrites.
- Assesses the project before touching anything: does components.json exist, which style is set (new-york or default), what already lives in components/ui, and whether theme tokens are defined in globals.css.
- Adds only the needed components through the CLI (npx shadcn add button card dialog), never the --all flag; copy-paste architecture means the source lands in the project and unused components never bloat the bundle.
- Builds on Radix primitives through the shadcn wrappers, so ARIA roles, keyboard navigation and focus trapping arrive as correct defaults instead of being hand-written and inevitably missed.
- Defines variants with cva() and merges classes with the cn() utility (clsx plus tailwind-merge), so conflicting Tailwind classes resolve predictably and string concatenation never enters the codebase.
- Maps the client's brand into HSL CSS variables in globals.css with a .dark override block; hardcoded hex colors are banned, so a full rebrand becomes a token swap, not a component rewrite.
- Closes with the verification checklist: RSC boundaries drawn correctly (overlays are client components, static parts stay server), asChild preventing invalid nested HTML like button-inside-link, dark mode toggling, keyboard navigation and screen reader pass.
One power source. 6 lines out.
shadcn-ui · core
core active · 6 lines
- ✓ adding shadcn components
Adding shadcn components to a Next.js or Vite project
- ✓ setting up a theme system
Setting up a theme system with CSS variables and dark mode
- ✓ building forms with reac…
Building forms with react-hook-form and zod
- ✓ drawing the right rsc vs
Drawing the right RSC vs 'use client' boundary
- ✓ composing datatable, com…
Composing DataTable, Combobox, and DatePicker components
- ✓ adapting tokens to a cli…
Adapting tokens to a client brand without touching component code
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
Full ownership of every component: no upstream breaking-change risk
license: perpetual -
Accessibility handled by Radix: keyboard nav, focus trap, screen-reader roles
license: perpetual -
Switch an entire brand look by swapping CSS variables in one file
license: perpetual -
Smaller bundles: only the components you add ship to production
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
CLI workflow: init, add, --all, --overwrite, and diff against upstream
6 parts · one working system · ships instantly by email
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
Frontend teams on the Next.js + React + Tailwind stack who want an accessible, themeable component library they fully control.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
We're on Vue with plain CSS, does this apply to us?
It targets the React plus Tailwind stack, on Next.js or Vite, because shadcn/ui components are React code styled with Tailwind and variants built on class-variance-authority. Outside that stack the patterns do not transfer.
-
What does this add over me just running npx shadcn add?
The CLI gets components in; this covers what breaks afterwards. It maps RSC versus 'use client' boundaries across 50+ components, the asChild Slot pattern that avoids invalid nested HTML, a three-layer theme token hierarchy, and a diff workflow against upstream changes.
-
Is this a hosted component library that keeps itself updated?
No. The copy-paste architecture is the opposite by design: components live in your repo and never auto-update, so upstream breaking changes cannot touch you. Pulling in upstream improvements is a deliberate diff-and-merge decision.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.