Tailwind CSS · Light & dark
Prism is a copy-paste UI kit: 26 component demos, 4 page blocks and design tokens in JSON, CSS and a Tailwind preset. Plain HTML, no framework required.
01 · Foundations
Tokens shared by every component. Change them once in the preset and the whole kit follows.
Brand violet with cyan and pink accents, plus slate neutrals.
Brand · violet
50
100
200
300
400
500
600
700
800
900
Accent · cyan
50
100
200
300
400
500
600
700
800
900
Accent · pink
50
100
200
300
400
500
600
700
800
900
Neutral · slate
50
100
200
300
400
500
600
700
800
900
Geist for UI and text, Geist Mono for code and numbers.
Display Prism
Heading · 30 / semibold
Title · 20 / medium
Body · 16 / regular. Clean, neutral text that stays readable in long paragraphs and in dense interfaces.
mono · 14 · const theme = "prism";
Soft corners and layered, tinted shadows.
02 · Actions
Every button has hover, active and focus states and works with a keyboard.
Primary, secondary, ghost, gradient and destructive.
Small to large, icon-only, loading and disabled.
Grouped actions and a radio-based segmented switch.
Status pills, counters and removable chips.
03 · Forms
Consistent sizing, clear focus rings and helpful error states.
Label, hint, leading icon, add-on and error state.
Native elements, styled consistently.
Accessible controls built on real inputs.
File upload area and a 6-digit code input with auto-advance.
Verification code
Type a digit and focus moves to the next box.
04 · Cards
Surfaces for pricing, people, content and metrics.
Highlighted plan with a feature list.
Pro
Popular$24/ month
Sample plan and price
Avatar, bio and actions.
Nia Okoye
Product designer · sample profile
Illustration, tags and a hover lift.
KPI tiles with an animated sparkline. Values are sample data.
Visitors
12.4k
+8.2%
Conversion
3.6%
+0.4 pt
Refunds
18
−3
06 · Feedback
Tell people what is happening, what worked and what to do next.
Info, success, warning and error messages.
Heads up
A new version of the kit is ready.
Saved
Your changes were saved.
Check your plan
You have used most of your storage.
Payment failed
Update your card to continue.
Loading states that keep layouts stable.
Processing
Click a button to fire a toast; empty states guide the next step.
No projects yet
Create your first project to get started.
07 · Overlays
Dialogs, menus, tooltips and accordions.
Native <dialog> with focus handling and Esc to close.
A menu that closes on outside click or Esc, and a hover/focus tooltip.
Built on native details/summary, no JavaScript needed.
Most components do. Tabs, toasts, the dialog and theme toggle use a small vanilla script.
Yes. Edit the brand scale in tokens/prism-preset.cjs and rebuild the CSS.
Every component ships with dark styles using Tailwind's class strategy.
08 · Data display
Tables and avatars for lists of people and things.
Responsive table with avatars and status. Sample people and projects.
| Owner | Project | Status | Updated | Actions |
|---|---|---|---|---|
 Ava Brennan | Design system | Active | 12 Oct | |
 Jun Park | Checkout flow | Review | 9 Oct | |
| Nia Okoye | Mobile app | Active | 3 Oct | |
 Omar Haddad | Marketing site | Paused | 28 Sep |
Sizes, status dots and a stacked group.
OH
+5
09 · Tokens
One source of truth in three formats. Open the files to see exactly what is included.
