Reducing Bundle Size

By default, styles.css includes all 50+ preset definitions.
If your app only uses a handful of presets, you can strip the rest from the compiled CSS and from the PresetPicker UI.

Vite Plugin (Recommended)

Install the plugin in your vite.config.ts.
It intercepts the styles.css import and the main package import automatically — no changes to your existing code needed.

// vite.config.ts
import { nextPresetsPlugin } from "@codecanon/next-presets/vite"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [
    nextPresetsPlugin({
      include: ["claude", "anew", "rose"],
    }),
  ],
})

Options

Option	Type	Description
`include`	`string[]`	Built-in preset IDs to include. All others are excluded from CSS and the picker UI. Alias: `presets`.
`exclude`	`string[]`	Built-in preset IDs to exclude. Ignored when `include` is set (use one or the other).
`add`	`PresetTuple[]`	Custom `[id, label]` presets to add — injected into the JS bundle alongside any included built-ins.

Adding custom brand presets

Use add to include custom presets (defined in your own CSS) in the picker without passing a presets array to PresetProvider at runtime:

// vite.config.ts
nextPresetsPlugin({
  include: ["nuteral", "claude"],
  add: [
    ["my-brand", "My Brand"],
    ["my-brand-dark", "My Brand Dark"],
  ],
})

Your custom preset CSS must be imported separately — the plugin handles JS and CSS for built-ins only:

/* app/globals.css */
@import "@codecanon/next-presets/default/nuteral.css";
@import "@codecanon/next-presets/styles.css"; /* intercepted by plugin */

/* your custom presets */
@import "./presets/my-brand.css";
@import "./presets/my-brand-dark.css";

The picker will show My Brand and My Brand Dark alongside the built-ins — no PresetProvider prop changes needed.

exclude takes precedence over include. Both include and presets are aliases for the same option — use one or the other, not both.

What the plugin does

Replaces styles.css with a virtual bundle containing only the selected preset files
Patches the PRESETS export so the picker only shows the presets you configured
Prepends add entries before built-ins in the picker list
Warns at startup if an unknown preset ID is passed
Falls back to all presets if no valid IDs are provided
Auto-deletes stale cached filter files when the config changes

Your existing CSS and JS imports stay unchanged.

/* app/globals.css — no changes needed */
@import "@codecanon/next-presets/default/nuteral.css";
@import "@codecanon/next-presets/styles.css";

Manual (Any Bundler)

Skip styles.css entirely and import only what you need.

/* app/globals.css */
@import "@codecanon/next-presets/default/nuteral.css";

/* only the presets you want in the picker */
@import "@codecanon/next-presets/presets/nuteral.css";
@import "@codecanon/next-presets/presets/claude.css";
@import "@codecanon/next-presets/presets/anew.css";

Filter presets in your UI

Pass a filtered preset list to PresetProvider so the picker only shows what you import:

import { filterPresets, PresetProvider } from "@codecanon/next-presets"

const MY_PRESETS = filterPresets(["nuteral", "claude", "anew"])

<PresetProvider presets={MY_PRESETS}>
  {children}
</PresetProvider>

Or add custom presets alongside built-ins:

import { filterPresets, PresetProvider } from "@codecanon/next-presets"

const MY_PRESETS = [
  ["my-brand", "My Brand"] as const,
  ...filterPresets(["nuteral", "claude"]),
]

<PresetProvider presets={MY_PRESETS}>
  {children}
</PresetProvider>

filterPresets preserves the original canonical order of built-in presets.

CSS Export Reference

Import path	Contents
`@codecanon/next-presets/styles.css`	All 50+ presets combined
`@codecanon/next-presets/custom-variants.css`	`@custom-variant` definitions for preset authoring
`@codecanon/next-presets/default/{id}.css`	Single preset — `:root` scoped (initial default)
`@codecanon/next-presets/presets/{id}.css`	Single preset — `[data-preset]` scoped (switching)