shadcn preset

Overview

shadcnpreset is a free, open-source platform for discovering, generating and previewing shadcn/ui presets and themes. Instead of clicking shuffle, users describe what they are building or the look they want, and AI returns matching presets rendered on real components such as dashboards, auth screens and marketing pages.

The project is a monorepo by Morgan Feeney with a Next.js site and a Figma variables plugin. Presets use shadcn's own encoding, and previews render with shadcn/ui's style CSS, themes and components, which are synced from the upstream repository. Community presets list their style, base color, theme, chart colors, icon set and fonts.

Features

• AI discovery: Describe a product or mood and get matching presets.
• Real UI previews: Dashboards, auth screens and marketing pages rendered in every shadcn/ui style.
• Page builder: Describe a page and get it assembled from blocks in a preset you can swap.
• Accessibility: Browse high-contrast presets and check color contrast.
• Developer tools: Preset CSS generator, contrast checker, image filter generator, theme generator and OG image debugger.
• Figma plugin: A plugin for working with shadcn preset variables in Figma.
• Community: Vote, save favorites and share preset URLs.

Tech stack

• Next.js, shadcn/ui, pnpm monorepo, Vitest, MIT license

Getting started

pnpm install
cp apps/shadcnpreset/.env.example apps/shadcnpreset/.env.local
pnpm dev   # http://localhost:4010