Installation

Requirements

React 19 or later
A shadcn/ui project (CSS variable-based theming)

Install

bun add @codecanon/next-presets

pnpm add @codecanon/next-presets

npm install @codecanon/next-presets

yarn add @codecanon/next-presets

Import styles

Two imports are required at your app root, and order matters:

globals.css

@import "@codecanon/next-presets/default/nuteral.css";
@import "@codecanon/next-presets/styles.css";

The preset file (e.g. nuteral.css) applies its variables to :root — this is the default appearance shown before any preset is selected or while the picker loads. styles.css then loads all preset overrides scoped to [data-preset="..."] selectors that activate when a user picks a theme.

You can swap nuteral.css for any other preset to change the default:

globals.css

@import "@codecanon/next-presets/default/blue.css";
@import "@codecanon/next-presets/styles.css";

Entry points

Import	Contents
`@codecanon/next-presets`	Providers, hooks, components, constants, types
`@codecanon/next-presets/default/<id>.css`	Required. Sets the default `:root` variables. Import before `styles.css`.
`@codecanon/next-presets/styles.css`	Required. All preset overrides scoped to `[data-preset="..."]`. Import after the preset file.
`@codecanon/next-presets/custom-variants.css`	`@variant preset-light` and `@variant preset-dark` directives for writing custom presets in your own CSS

Peer dependencies

@codecanon/next-presets uses next-themes internally for light/dark switching. It ships bundled and requires no separate install. React and React DOM must be installed in your project.

{
  "peerDependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  }
}