Design.dev design.dev
AI Tools

shadcn Preset Decoder

Paste a shadcn preset code and see what it configures. Export globals.css, a DESIGN.md, or a prompt for your coding agent. Runs in your browser.

1 Paste a preset Code or shadcn/create link

Try:

2 Edit or build Every change re-encodes the code

3 Output options Not part of the code

Used in the prompt. The CLI asks for this separately, so codes do not store it.
Optional. Used as the DESIGN.md name.
Decoded preset format b (v2)
b0
Open on shadcn/create
Live Preview

Nova · Neutral on Neutral

Inter body text with matching headings, Lucide icons, default radius.

Primary Secondary Outline Delete

Card title

Badge
Cards use the card surface with a hairline border. Inputs pick up the input border and the focus ring.

4 Export

globals.css 

						

					

				


				

					
				

			


			
			

				

					
Use the preset

					

						
your-project/
├── components.json    ← style, base color, icon library, menus
├── app/globals.css    ← :root / .dark tokens from this preset
├── DESIGN.md          ← export from the DESIGN.md tab
└── components/ui/

					

					

						
Official shadcn CLI commands (copy and run in your own terminal):

						
    
							
  • 
								New project
								
    
									npx shadcn@latest create --preset b0
									
								
    
							
    • 
							
  • 
								Existing project
								
    
									npx shadcn@latest init --preset b0
									
								
    
							
    • 
							
  • 
								Inspect with the CLI
								
    
									npx shadcn@latest preset decode b0
									
								
    
							
    • 
							
  • 
								Shareable link
								
    
									https://ui.shadcn.com/create?preset=b0
									
								
    
							
    • 
						

						
This page never runs commands or contacts a server. Nothing you paste leaves the browser.

					

				


				
				

					
						
Refine it

						
DESIGN.md Generator →

						
Lint the exported DESIGN.md, add prose, and export Tailwind or DTCG tokens.

					
					
						
Different start

						
Design Tokens Generator →

						
Start from brand colors or a Figma export instead of a shadcn preset.

					
					
						
Then

						
AGENTS.md Generator →

						
Point coding agents at the DESIGN.md and preset from your agent instructions.

					
				

			

		


		

			

				

					
Frequently asked questions

					
What shadcn presets are, how the codes work, and what this page does and does not do.

				

				

					

						What is a shadcn preset?
						
A short code such as b5owWMfJ8l, introduced with shadcn CLI v4 in March 2026, that packs a project's design configuration: style, base color, theme, chart color, icon library, body and heading fonts, radius, menu accent, and menu color. npx shadcn@latest create --preset CODE scaffolds a project from it, and ui.shadcn.com/create lets you build and preview one.

					

					

						How are shadcn preset codes encoded?
						
The first letter is the format version: a is the original eight fields, b adds chart color and heading font. The rest is a base62 number whose bits store an index into each value list (3, 3, 4, 6, 6, 6, 6 and 6 bits, plus 6 and 5 bits in format b). This page ports that logic from the MIT-licensed shadcn CLI and runs it locally. It never calls shadcn's servers.

					

					

						What is the difference between base color and theme?
						
The base color is the neutral ramp used for background, card, border, muted text and the sidebar: Neutral, Stone, Zinc, Mauve, Olive, Mist or Taupe. The theme is the hue for primary, secondary, chart and sidebar-primary tokens: any of the colored palettes, or the same neutral as the base. shadcn/create only allows a neutral theme that matches the base color, so this page keeps those two selects compatible.

					

					

						Why does an older code show a chart color it does not contain?
						
Format a codes predate the chart color field. The shadcn CLI derives one from the theme (neutral to blue, stone to lime, zinc to amber, mauve to emerald, olive to violet, mist to rose, taupe to cyan) and inherits the heading font. This page applies the same mapping and labels the result as derived.

					

					

						Where do the CSS variable values come from?
						
From the same OKLCH palettes shadcn/create uses. The base color supplies the neutral tokens, the theme overrides primary, secondary, chart and sidebar-primary tokens, the chart color overrides chart-1 to chart-5, a bold menu accent sets accent to primary, and the radius option sets --radius. The data snapshot date is included in every export. If shadcn ships new palettes, verify against the CLI.

					

					

						Does this page run the shadcn CLI commands?
						
No. The page never executes anything and never contacts a server. The npx shadcn@latest commands shown are the official CLI commands for you to copy into your own terminal, and the shadcn/create button opens shadcn's site in a new tab.

					

					

						Is this an official shadcn tool?
						
No. It is an independent tool from design.dev. shadcn/ui is MIT-licensed by shadcn and is not affiliated with this site. Upstream value lists are append-only, so existing codes keep decoding. If a code uses a value newer than this page's data snapshot, the page says so instead of guessing.

					

				

			

		

	


	
	

		

			
		

	


	

	
Copied to clipboard!