Next Presets
50+ shadcn/ui color presets with light/dark mode support for React.
@codecanon/next-presets is a React library for managing and switching between 50+ beautiful color presets built on top of shadcn/ui. Each preset defines a complete set of CSS variables for both light and dark mode — background, foreground, primary, accent, muted, sidebar, chart colors, and more.
Highlights
| Feature | Details |
|---|---|
| Presets | 50+ built-in themes (violet-bloom, catppuccin, cyberpunk, …) |
| Dark / Light | Full dual-mode per preset, system preference detection |
| Persistence | localStorage with cross-tab sync |
| Picker UI | Slide-out sheet with search and arrow-key navigation |
| Preview | Live mini-app preview card per preset |
| Custom presets | Extend with your own via @variant preset-light / preset-dark |
| Peer deps | React 19, next-themes |
Entry points
| Import | Contents |
|---|---|
@codecanon/next-presets | Providers, hooks, components, constants, types |
@codecanon/next-presets/default/<id>.css | Required first. Sets default :root variables (e.g. default/nuteral.css) |
@codecanon/next-presets/styles.css | Required second. All-in-one components + 50+ presets scoped to [data-preset="..."] |
@codecanon/next-presets/presets.css | Optional. Import all 50+ preset styles = scoped to [data-preset="..."] |
@codecanon/next-presets/components.css | Optional. Import ui specific styles |
@codecanon/next-presets/presets/<id>.css | Optional. Import specific presets (e.g. presets/nuteral.css) |
@codecanon/next-presets/custom-variants.css | @variant directives for writing custom presets |