Types

All types are exported directly from @codecanon/next-presets.

import type {
  PresetKeys,
  PresetTuple,
  ColorScheme,
  Theme,
  ThemeProviderProps,
  PresetProviderProps,
} from "@codecanon/next-presets";

PresetKeys

A union of all valid built-in preset IDs, derived from the PRESETS constant.

type PresetKeys =
  | "nuteral"
  | "nuteral-accent"
  | "codecanon"
  | "anew"
  | "red"
  | "rose"
  | "orange"
  | "green"
  | "blue"
  | "yellow"
  | "violet"
  | "modern-minimal"
  | "violet-bloom"
  | "t3-chat"
  | "twitter"
  | "mocha-mousse"
  | "bubblegum"
  | "amethyst-haze"
  | "notebook"
  | "doom-64"
  | "catppuccin"
  | "graphite"
  | "perpetuity"
  | "kodama-grove"
  | "cosmic-night"
  | "tangerine"
  | "quantum-rose"
  | "nature"
  | "bold-tech"
  | "elegant-luxury"
  | "amber-minimal"
  | "supabase"
  | "neo-brutalism"
  | "solar-dusk"
  | "claymorphism"
  | "cyberpunk"
  | "pastel-dreams"
  | "clean-slate"
  | "caffeine"
  | "ocean-breeze"
  | "retro-arcade"
  | "midnight-bloom"
  | "candyland"
  | "northern-lights"
  | "vintage-paper"
  | "sunset-horizon"
  | "starry-night"
  | "claude"
  | "vercel"
  | "darkmatter"
  | "mono"
  | "soft-pop"
  | "sage-garden";

PresetTuple

A single [id, label] pair describing one preset. Used when passing custom entries to PresetPickerContent.

type PresetTuple = readonly [string, string];

ColorScheme

The resolved color mode — never includes "system".

type ColorScheme = "light" | "dark";

Theme

All theme values a user can select, including the "system" option.

type Theme = "light" | "dark" | "system";

ThemeProviderProps

Props accepted by <ThemeProvider>.

type ThemeProviderProps = {
  children: React.ReactNode;
  defaultTheme?: Theme;       // default: "system"
  storageKey?: string;          // default: "theme"
  attribute?: string | string[];
  // + all next-themes ThemeProviderProps
};

PresetProviderProps

Props accepted by <PresetProvider>.

type PresetProviderProps = {
  children: React.ReactNode;
  storageKey?: string;            // default: "preset"
  attributes?: `data-${string}`;  // default: "data-preset"
};

PresetState

Returned by usePreset().

type PresetState = {
  /** The currently active preset ID, or undefined when none is set. */
  preset?: string | undefined;
  /** Switch to any preset by ID — built-in or custom. */
  setPreset: React.Dispatch<React.SetStateAction<string | undefined>>;
  /** Clears the active preset and removes the data-preset attribute. */
  resetPreset: () => void;
};

PresetPickerState

Returned by usePresetPicker().

type PresetPickerState = {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  toggleOpen: () => void;
};

PRESETS (constant)

The full preset registry — a readonly array of [id, label] tuples exported from @codecanon/next-presets.

const PRESETS: readonly [PresetKeys, string][];

Example:

import { PRESETS } from "@codecanon/next-presets";

PRESETS[0]; // ["nuteral", "Nuteral"]
PRESETS.find(([id]) => id === "violet-bloom"); // ["violet-bloom", "Violet Bloom"]

Types

On this page