build a reusable shadcn + codex design system for every future project

By Enzo Sison -- Founder of Prism

Turn your UI into a system — not a rebuild

in less than 15 minutes you can spin up a reusable shadcn/ui design system that codex automatically understands. build once, reuse everywhere, and stop recreating buttons, inputs, and tables for every engagement.

run the setup script

jump to the setup steps

save the system once. ship it on every build.

why this matters

problem

most teams still rebuild buttons, inputs, modals, and tables every time a new site (opens in a new tab), dashboard, or product idea lands on the roadmap. it burns hours and introduces tiny style inconsistencies that compound as projects stack up.

solution

codex cli + shadcn/ui gives you a universal design foundation. by promoting a single template into a reusable codex context, every future project inherits the same responsive typography, spacing, and component logic - no more duplicate work, no more visual drift.

the minimal workflow

no fluff. just the commands you need.

1. create your local shadcn template

cd ~
mkdir codex-template
cd codex-template
npx create-next-app@latest .
npx shadcn@latest init
npx shadcn@latest add button card input chart table dialog form

your /components/ui folder now holds production-ready primitives you can reuse everywhere.

2. add your base colors

open app/globals.css and append:

@layer base {
  :root {
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
  }
  .dark {
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
  }
}

those variables give codex predictable, brand-ready data visualizations without rebuilding chart palettes.

3. save the template

mv codex-template codex-shadcn-template

ship it to github (opens in a new tab) if you want teammates or agents to pull it remotely:

git init && git add .
git commit -m "base shadcn template"
git remote add origin https://github.com/<you>/codex-shadcn-template.git
git push -u origin main

4. use it in new projects

codex init --template ~/codex-shadcn-template

or reference the hosted repo:

codex init --template https://github.com/<you>/codex-shadcn-template

add a shell alias so starting fresh takes one command:

alias codexnew='codex init --template ~/codex-shadcn-template'

5. use it in existing projects

cd ~/projects/my-website
codex --context ~/codex-shadcn-template

then tell codex: "use the components from my shadcn template to rebuild the form and chart layouts." it pulls in your button variants, form field patterns, and chart scaffolding automatically - no copy/paste marathons.

what you get

• ✅ a universal design system (next.js (opens in a new tab) + tailwind + shadcn/ui)
• ✅ consistent components and tokens across projects
• ✅ lightning-fast new project setup with codex init
• ✅ seamless codex integration for agent-powered ui generation
• ✅ a reusable design language your agency or dev team can scale

ready-to-use setup script (optional)

if you want everything prewired, prism ships a ready-to-run setup.sh that provisions the template, syncs colors, and registers your codex alias automatically. reach out and we will drop it into your workspace - or simply ask codex to generate it inside your project using this article as context.

get the setup script

why prism shares this

prism builds developer-ready design systems that connect design, ai, and code. standardizing around codex and shadcn lets every client website - from local businesses to national consulting firms - ship with consistent ui, faster turnaround, and fewer regressions. pairing this template with our services, the codex + lovable workflow we outlined in how to connect openai codex to your lovable.dev website, and the repeatable growth loops inside the prism flywheel keeps teams focused on outcomes, not scaffolding.

design once. deploy everywhere. that's the prism way.