bloomkit.dev

the live documentation site for @bloomkit/react — using the library to document itself

bloomkit.dev is the companion documentation site for the @bloomkit/react component library. it covers the library end-to-end: landing page, live component previews, theming documentation, palette switcher with a one-click "copy CSS" export, and an interactive bento-grid showcase. every demo is a real, running instance of the component — no screenshots — so the docs are also the library's own proof. built with next.js 16 on the app router, mdx for the written pages, motion for page transitions and scroll-reveal, cmdk for ⌘K search, and shiki for syntax highlighting.

bloomkit-docs

key features

  • live component previews — every demo is a real component, not an image
  • mdx-powered documentation pages with frontmatter and custom components
  • palette switcher with one-click "copy CSS" export of the full token set
  • interactive bento-grid showcase on the landing page
  • ⌘K command palette search via cmdk
  • directional page transitions keyed on pathname
  • scroll-reveal animations via motion/react
  • syntax highlighting via shiki + rehype-pretty-code

tech stack

frontend

next.js 16
app router
turbopack
react 19
typescript
tailwind css v4
motion
cmdk
@bloomkit/react

content

mdx
rehype-pretty-code
shiki

deployment

vercel
@vercel/analytics
custom domain

challenges

  • documenting a component library with itself without the docs and the library going out of sync
  • making every live preview embed robust against container-query quirks and parent layout interference
  • letting users lift a full palette out of the docs and into their own project in one step
  • keeping page transitions smooth across route changes without breaking scroll position

solutions

  • pinned the docs site to the published @bloomkit/react version so demos always match the shipped api
  • documented container-query escape hatches for components like navbar when embedded in previews
  • built a palette-to-css exporter that serializes every --bloom-* token into a copyable block
  • used animatepresence keyed on usepathname for directional slide transitions between routes