Kits — Honeydeck docs

Customization Kits Honeydeck works out of the box with sensible defaults. Customize progressively — override a color, swap a layout, or adopt a full kit from npm. Zero Config A plain deck needs no imports or configuration: Honeydeck automatically loads base CSS with default design tokens and the built in layout set. Customizing Colors & Typography Import a CSS file to override design tokens. The cascade does the rest: You only override what you want — everything else keeps its default. Both light and dark modes can be targeted: Available Tokens | Token | Purpose | | | | | honeydeck primary | Brand color per mode | | honeydeck background | Slide background | | honeydeck foreground | Main text color | | honeydeck surface | Cards, code blocks, callouts | | honeydeck border | Border/divider color | | honeydeck accent | Accent, computed as complementary by default | | honeydeck font heading | Heading font family | | honeydeck font body | Body font family | | honeydeck font mono | Monospace font family | | honeydeck font base | Base font size default: 16px | | honeydeck font scale | Heading scale factor default: 1.25 | | honeydeck border radius | Default border radius | | honeydeck code line dim opacity | Dim for non highlighted code lines | → Full token reference in Kit Authoring /docs/kit authoring design tokens Bundled Themes Honeydeck defaults to a clean black, white, and grey theme: @honeydeck/honeydeck/themes/clean.css is available as an optional clean theme layer when you want to name that layer directly. Honeydeck also includes a Bee theme that can be layered on top of the base theme: Bundled Layout Sets The default layout set is clean and minimal: The same clean set is also available through the named clean kit import path @honeydeck/honeydeck/layouts/clean . Use the Bee layout set with the Bee theme when you want the original playful Bee look: For two column slides, import slots from the matching layout set: Using Tailwind Tokens are mapped to Tailwind utilities, so you can use them inline: Using Layouts in your decks frontmatter, configure which layouts to use: Select a layout in slide frontmatter: If no layout: is specified, Default is used. Layout names are PascalCase. Built in Layouts | 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 title, body, author | | TwoCol | Two equal columns | | Image | Prominent image with optional title and children | | ImageLeft | Prominent left image with title and body on the right | | ImageRight | Prominent right image with title and body on the left | Passing Props to Layouts Layouts receive extra frontmatter fields as props; Cover body copy belongs in the slide content: Two Column Layout TwoCol uses slot components you import: Image Layout Displays a specified image large and prominent: Side Image Layouts ImageLeft and ImageRight place the image beside the content while using the same image , darkImage , and alt frontmatter as Image : Creating Custom Layouts Custom layouts are React components you import and wrap content with: Use it in MDX: 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: Creating a Reusable Layout Set For a set of layouts you want to reuse across slides or decks, create a layout map: Layouts can export a colocated demo for / /layouts : Reference it in deck frontmatter: Now you can use layout: Hero in any slide. The docs reference lists every layout in the active map, even if no slide currently uses it. Using Third Party Kits A kit is an npm package that bundles theme CSS, layouts, and/or components. You reference each part individually: Mix and Match Since each concern is an explicit reference, mix freely: Use layouts from one kit, colors from another, components from a third. Extending a Kit's Theme Layer your overrides on top of a kit's CSS: → Building your own kit? See Kit Authoring /docs/kit authoring