Syndra is a documentation template for developer products. It has a neutral, minimal design with a single accent color and animations throughout, and it works well from phones to wide desktop screens.
Features
⌘K search: a command palette covering every page and section, with keyboard navigation and highlighted matches. The search index is generated at build time, so there's no external service to set up.
Dark and light mode: follows the system setting, remembers the reader's choice, and switches with a circular reveal animation.
Smooth navigation: client-side page transitions, a sidebar that stays in place with a sliding active indicator, and an "On this page" table of contents that tracks your scroll.
MDX components: Callout, Tabs, Steps, Card, CardGrid, Accordion and Badge, all usable in MDX without imports. Tabs that share a key switch together and remember the reader's choice, which suits package manager or language tabs.
Code blocks: light and dark syntax highlighting, file name headers, a copy button, line highlighting, diffs and focus mode.
Responsive layout: a slide-in navigation drawer on mobile, a collapsible "On this page" menu on smaller screens, and tables that scroll sideways.
Accessible: a skip link, keyboard-friendly tabs and search, and support for reduced-motion preferences.
Easy to customize
Set the site name, links, version and sidebar groups in a single config file.
All colors are design tokens. Change one accent variable to rebrand the whole site.
Write pages in Markdown or MDX. Each folder becomes a sidebar group, and pages are ordered with simple frontmatter.
Sample content for a fictional company is included, along with an Authoring section that documents every component and frontmatter option.
Built with Astro 7, MDX, Tailwind CSS v4 and Shiki. The site is fully static, with no UI framework and very little JavaScript.
