Tabs & Details

Basic Tabs

npm

npm install cosmos-docusaurus-theme

yarn

yarn add cosmos-docusaurus-theme

pnpm

pnpm add cosmos-docusaurus-theme

Tabs with text content

Dark mode

Uses the Void palette — Tailwind gray-950/900/800 neutral blacks.

--ifm-background-color: #030712;        /* gray-950 */
--ifm-background-surface-color: #111827; /* gray-900 */

Light mode

Uses the Slate palette — warm white backgrounds with brown text tones.

--ifm-background-color: #f9fafb;   /* gray-50 */
--ifm-font-color-base: #1a1714;    /* warm near-black */

Synced Tabs (same group-id)

npm

Install

yarn

Install

npm

npm run build

yarn

yarn build

When both groupId values match, selecting a tab in one group updates all groups.

---

Details (collapsible)

Basic

Click to expand — advanced configuration

All --ifm-* CSS variables can be overridden after importing the theme.

:root {
  --ifm-color-primary: #e11d48;
  --ifm-font-family-base: 'Inter', system-ui, sans-serif;
}

With list inside

Supported Docusaurus elements

• Navbar + sidebar
• Code blocks (all languages)
• Admonitions (5 types)
• Tabs + grouped tabs
• Tables and lists
• Cards and badges
• Algolia DocSearch
• Back-to-top button
• Progress bar

Nested

Outer section

This is the outer content.

Inner section

Deeply nested expandable content. Both levels respect the theme.