Customization — Honeydeck docs

Customization Honeydeck starts with built in layouts and a small base theme. Customize only what you need: CSS tokens, React components, or a layout map. Mental model | Concern | What you write | How you use it | | | | | | Theme | CSS files with Honeydeck tokens and Tailwind utilities | import CSS from deck.mdx or from another CSS file | | Components | React components | import them in MDX | | Layouts | React layout components in a layout map | set layouts: in deck frontmatter, then choose layout: per slide | All references are explicit. Local files and installed packages work the same way: import the module you want. Start with CSS The starter deck imports ./styles.css from deck.mdx : A typical styles file imports Tailwind and the Honeydeck base theme: Override tokens after the base theme: Target light and dark modes when needed: Bundled themes and layouts The default visual style is clean black, white, and grey: @honeydeck/honeydeck/themes/clean.css is available as an optional named clean layer. The Bee theme adds the original playful palette: Use the matching Bee layout set when you want Bee slide chrome too: The default clean layout set is available through either path: Tailwind token utilities Honeydeck maps theme tokens to Tailwind utilities: Useful color utilities include primary , primary foreground , accent , accent foreground , background , foreground , surface , surface foreground , and border . Design tokens Themes provide CSS custom properties. Colors derive from a primary using oklch relative color syntax, with separate values for light and dark modes: | Token | Purpose | | | | | honeydeck primary | Brand color for this mode | | honeydeck primary foreground | Text on primary backgrounds | | honeydeck background | Main slide background | | honeydeck foreground | Main text color | | honeydeck surface | Cards, code blocks, callouts | | honeydeck surface foreground | Text on surfaces | | honeydeck border | Border/divider color | | honeydeck accent | Accent, computed as complementary by default | | honeydeck accent foreground | Text on accent backgrounds | | honeydeck link color | Link color, defaulting to inherit | | honeydeck border radius | Default border radius | | honeydeck font heading | Heading font family | | honeydeck font body | Body font family | | honeydeck font mono | Monospace font family | | honeydeck font base | Base font size, defaulting to 16px | | honeydeck font scale | Heading scale factor, defaulting to 1.25 | | honeydeck code line dim opacity | Dim opacity for non highlighted code lines | Use built in layouts Select a layout in slide frontmatter: If no layout: is specified, Default is used. Layout names are PascalCase. | Layout | Description | | | | | Blank | Empty slide with only children | | Default | Title top left, body flows below | | Section | Big centered heading for section breaks | | Cover | Opening/closing slide with title, body, author, and date | | TwoCol | Two equal columns | | Image | Prominent image with optional title and caption/content | | ImageLeft | Prominent left image with title and body on the right | | ImageRight | Prominent right image with title and body on the left | Extra slide frontmatter fields are passed to the selected layout: Two column slides TwoCol uses slot components from the active layout set: For Bee layouts, import slots from the Bee path: Image slides Image , ImageLeft , and ImageRight accept image , darkImage , and alt frontmatter: Create custom layouts Custom layouts are React components. Use a layout map when you want layout: frontmatter to select them. Create a layout map: Reference it from deck frontmatter: Use it on any slide: You can also import a React component directly and wrap slide content when you do not need a layout map: Layout props LayoutProps is generic so layouts can type their accepted frontmatter: Example typed layout: Layout demos Layouts can export a demo constant for / /layouts : mdx is the single source for both the live preview and the copyable usage snippet in the layouts reference page. If no demo is exported, the layout still appears with a “No demo MDX provided” hint. Slot components Layouts that need content slots can export slot components alongside the layout: Users import slots from the layout module: Image helpers Built in placeholder images are available as URL exports for custom image layouts: Use ColorModeImage when a custom layout accepts separate light and dark image URLs: Runtime reference During development, open the built in reference pages: / /theme shows all honeydeck CSS tokens with computed values and descriptions. / /layouts shows layouts from the active layout map, live visual previews, copyable snippets, and extracted frontmatter prop docs. / /components shows public built in components exported from @honeydeck/honeydeck/components .