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({
      presets: ["claude", "anew", "rose"],
    }),
  ],
})

Also accepts include (alias to presets) and exclude. The exclude prop takes higher precedence than include or presets. Also, include takes higher precendence over presets - use either or and not both.

What the plugin does

Replaces styles.css with a virtual bundle containing only:
- components.css
- Selected preset files
Overrides the PRESETS export so PresetPicker only shows selected presets
Warns at startup if an unknown preset ID is passed
Falls back to all presets if none are valid

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.
components.css is pre-compiled and does not require Tailwind on the consumer side.

/* app/globals.css */
@import "@codecanon/next-presets/default/nuteral.css";
@import "@codecanon/next-presets/components.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

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

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

// Inside your picker:
<PresetPickerContent presets={MY_PRESETS} />

filterPresets preserves the original canonical order of presets.

CSS Export Reference

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

Reducing Bundle Size