Components Showcase

This page demonstrates every element styled by the theme.

Headings

Heading 1 — The quick brown fox

Heading 2 — Jumped over the lazy dog

Heading 3 — Pack my box with five dozen liquor jugs

Heading 4 — Sphinx of black quartz, judge my vow

---

Code blocks

Shell

npm install cosmos-docusaurus-theme
docker compose up -d
git commit -m "feat: add cosmos theme"

JavaScript

docusaurus.config.js

export default {
  themes: ['cosmos-docusaurus-theme'],
  themeConfig: {
    colorMode: {
      defaultMode: 'dark',
    },
  },
};

YAML

docker-compose.yml

services:
  docs:
    image: node:20-alpine
    working_dir: /app
    command: npm run start
    ports:
      - "3000:3000"
    volumes:
      - .:/app

TypeScript with highlighted lines

src/theme/index.ts

import type { Plugin } from '@docusaurus/types';

export default function cosmosTheme(): Plugin {
  return {
    name: 'cosmos-docusaurus-theme',
    getClientModules: () => ['./css/theme.css'],
  };
}

---

Admonitions

note

This is a note. Used for neutral supplementary information.

tip

This is a tip. Perfect for best practices and shortcuts.

info

This is an info block. Great for contextual guidance.

warning

This is a warning. Use sparingly — reserve for real caution.

danger

This is a danger block. Reserved for destructive or irreversible actions.

---

Tables

Package	Version	License	Downloads/month
cosmos-docusaurus-theme	1.0.0	MIT	—
@docusaurus/core	3.7.0	MIT	800k+
stylelint	16.0.0	MIT	5M+
prism-react-renderer	2.4.0	MIT	1M+

---

Inline code and badges

Install with npm install cosmos-docusaurus-theme or load from themes in your config.

The theme targets [data-theme='dark'] for dark mode and :root for light mode.

stable  beta  deprecated

---

Utility classes

HTTP method labels

GET /api/theme/info

POST /api/theme/apply

PUT /api/theme/update

DELETE /api/theme/reset

PATCH /api/theme/partial

Status labels

System status: OK

Degraded performance: WARN

Service outage: CRIT

No data available: UNKNOWN

---

Blockquote

"Good design is as little design as possible."

— Dieter Rams

---

Lists

Unordered

• Outfit as the primary typeface
• JetBrains Mono for code
• Indigo brand palette from TailAdmin
• Dark mode first-class

Ordered

1. Install the package via npm
2. Add cosmos-docusaurus-theme to the themes array
3. Set defaultMode: 'dark' in colorMode
4. Restart the dev server

Nested

• Theme variables
  • Color palette
  • Typography scale
  • Spacing tokens
• Component styles
  • Navbar & sidebar
  • Code blocks & admonitions
  • Tables & pagination