Skip to content
IndexDesign corpus
Blocks, Templates & ThemesGeneratorAI ToolColor ToolMITFreeReact

StyleGlide

Prompt-driven shadcn/ui theme generator: P3 color scales, font pairs, live preview

Aboutstyleglide.ai

StyleGlide generates complete shadcn/ui style kits from a natural-language description of your project: a P3-gamut color palette, display and text font pairings drawn from hundreds of open-source families, and the full set of shadcn CSS variables. You preview kits live against mock applications and popular UI frameworks, edit or mix generated kits by hand, and export in Tailwind and shadcn-ready form through the shadcn registry. A companion package, @styleglide/theme-editor, drops the same editor into any running shadcn app via a script tag or npm install. The hosted app requires an account; the editor package is MIT.

Install
npm install @styleglide/theme-editor
For an agent

Use StyleGlide at the start of a shadcn project when the brief gives you a vibe but no brand — it is faster at producing a coherent, P3-correct color scale and a font pairing than picking hex values by hand, and it emits real CSS variables rather than hardcoded tokens. For an agent workflow the useful artifact is the exported globals.css / shadcn theme, not the app itself: the editor sits behind a login, so a headless run cannot generate a kit and you should have the human paste the export. Do not expect components or blocks — pair it with a component registry such as coss ui or shadcn/ui, and sanity-check generated pairs for AA contrast, which the tool does not guarantee.

Why it is here. Theme generators are crowded (tweakcn, shadcn.io, shadcndesign), but StyleGlide is the one that treats typography and P3 color as first-class alongside the palette and exports through the shadcn registry rather than a copy-paste blob.

Install command, framework, licence and component list.
Notable for
  • natural-language style-kit generation
  • P3-gamut color palettes by default
  • hundreds of open-source font pairings
  • embeddable MIT theme editor package
  • variable-based output, not hardcoded tokens
Provenance

Verified 2026-08-15. HTTP 200. https://www.styleglide.ai (curl), https://www.styleglide.ai/pricing (404), https://docs.styleglide.ai, https://api.github.com/repos/shane-downes/styleglide, https://registry.npmjs.org/@styleglide/theme-editor

Related resourcesBlocks, Templates & Themes