Skip to main content

Tables & Lists

Table — default alignment

PackageVersionLicenseDownloads/month
cosmos-docusaurus-theme1.1.7MIT
@docusaurus/core3.9.2MIT800k+
stylelint17.4.0MIT5M+
react19.2.4MIT30M+

Table — custom alignment

LeftCenterRight
Item A42$1,200
Item B7$340
Total49$1,540

Table — with inline elements

NodeStatusCommand
compute001Onlinessh compute001
compute002Offline
gpu-01Drainingsqueue -w gpu-01

Lists

Unordered

  • Outfit + JetBrains Mono typography
  • Indigo brand palette (#465fff)
  • Dark mode first-class (default)
  • Zero JavaScript — CSS only
  • Compatible with Docusaurus 3+

Ordered

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

Task list

  • CSS variables mapped to Infima
  • Dark / light mode
  • Tabs, cards, admonitions
  • Algolia DocSearch styled
  • Back-to-top button
  • Progress bar
  • RTL support (planned)
  • Custom Prism theme (planned)

Nested

  • Theme variables
    • Color palette (Void / Slate)
    • Typography scale (Outfit + JetBrains Mono)
    • Spacing + shadow tokens
  • Component styles
    • Navbar + toggle button
    • Sidebar + collapsible menu
    • Code blocks + inline code
    • Tables, admonitions, pagination
  • Utility classes
    • .method-get/post/put/delete/patch
    • .status-ok/warn/crit/unknown
    • .state-ok/warn/crit/unknown

Mixed nested (ordered + unordered)

  1. Install the theme
    • From npm: npm install cosmos-docusaurus-theme
    • From source: file:../cosmos-docusaurus-theme
  2. Configure Docusaurus
    • Add to themes array
    • Optionally override variables in custom.css
  3. Deploy
    • GitHub Pages via Actions
    • Netlify, Vercel, or any static host