Kivo Theme Documentation
Kivo is an Astro and Tailwind CSS theme for developer-facing SaaS products: cloud platforms, APIs, AI products, analytics tools, and dev tools. It ships about 38 page designs, including 4 homepages, in English and French, in light and dark mode.
Most changes in Kivo are edits to plain text files, not code: text, images, buttons, menus, and the layout of every section that has more than one. Colors are a few values in one CSS file. When you do want to change code, the theme ships instruction files that tell AI coding tools how it is built.
What Is Included
- 4 homepages: developer cloud (
/), API product (/home-api/), AI product (/home-ai/), and data or analytics product (/home-analytics/) - Product pages: features overview, feature detail pages (with 4 templates:
default,api,guide,showcase), solutions, integrations directory and detail, pricing with a billing toggle and a comparison table (a usage estimator is available as an optional pricing layout), compare (product vs. alternative) - Content: blog with authors, categories, tags, and RSS; changelog with tags and RSS; a docs landing page that links to your own documentation site
- Company: about, team and member pages, careers and job pages, customers and case studies, testimonials wall, community, security and trust, system status (a static sample you edit by hand)
- Account and legal: log in, sign up, and password reset screens (design only, with no account system), contact sales, privacy policy, terms, cookie policy, and a 404 page per language
- 52 section components. 14 of them have more than one layout (46 layouts in total, counting each default), and you switch between them with one line. The page header has 4 layouts of its own
- Built in: site search (⌘K), dark mode, cookie consent, SEO (sitemap,
robots.txt, structured data, generated Open Graph images),llms.txtand Markdown copies of pages, “Ask AI” links, contact forms (Formsubmit, Formspree, or Netlify Forms), Mailchimp newsletter forms, and code blocks with copy buttons
Choose Your Path
Every guide in these docs starts with the plain-language task, then shows the exact file and setting. Pick the path that matches how you like to work:
I don't code Follow the Quick Start, then the Beginner Guide. You only edit text files.
I want AI to help Use Claude, Cursor, Copilot, Gemini, Windsurf, or ChatGPT with ready-made prompts.
I'm a developer Learn the architecture, then use the Customization reference.
I'm ready to launch Set your URL, connect forms, and deploy.
The Files You Will Edit Most
| What you want to change | Where it lives |
|---|---|
| Site name, URL, forms, and global switches | src/config/config.toml |
| Header and footer links | src/config/menu.en.json, src/config/menu.fr.json |
| Colors, type scale, and breakpoints | src/styles/theme.css |
| Fonts | src/config/fonts.json |
| Text and images of a section | src/content/sections/english/ (and french/) |
| Text and section settings of one page | src/content/<page>/english/-index.md |
| Blog posts, changelog, features, and other lists | src/content/<collection>/english/ |
| Button labels and other small interface text | src/i18n/en.json, src/i18n/fr.json |
Links
- Live Preview (the demo turns on the floating “Change layout” button; it is off in your copy)
- Layout Gallery: the layouts of 13 sections and the page header (the contact section’s
saleslayout is on/contact/). In your copy, runnpm run devand openhttp://localhost:4321/elements/ - Support