CSS is Awesome

— a tiny design system —

Bring your own selectors. We bring the design system.

0 KB runtime JS24 themes6 zero-JS components8 KB full bundle (gz)

— same accordion, less ceremony —

cia · 8 LOC · 0 KB JS
<details name="faq" class="cia-accordion">
  <summary>Question</summary>
  <div>Answer</div>
</details>
<details name="faq" class="cia-accordion">
  <summary>Another?</summary>
  <div>Another.</div>
</details>
Tailwind + Headless UI · 70 LOC · 22 KB JS
import {
  Disclosure, DisclosureButton, DisclosurePanel,
} from '@headlessui/react'

<div className="space-y-2">
  <Disclosure>
    <DisclosureButton className="…">
      Question
    </DisclosureButton>
    <DisclosurePanel className="…">
      Answer
    </DisclosurePanel>
  </Disclosure>
  {/* …another Disclosure, manual close-others state */}
</div>

Native <details name="…"> auto-closes siblings. Browser does the work.

— why this exists —

Every design system I tried was buggy.
Painful to update. Slow to fix.

This one isn't. It's small enough to read in an afternoon, fast enough to update in a minute, and honest about what it does.

— that's the whole pitch.

Theme