Skip to main content

Essentials

Base layout containers, scoped auto-styling, and typography.

Selectors

.cider
Opt-in scope — auto-styles native HTML elements inside it (typography, forms, tables, etc.).
.cider-fixed
Centered responsive page layout. Use alongside .cider.
.cider-reset
Stops .cider auto-styling from leaking into nested components.

Cider Scope

Hello

Native elements are auto-styled inside a .cider scope.

HTML 
<div class="cider">
  <h1>Hello</h1>
  <p>Native elements are auto-styled inside a <code>.cider</code> scope.</p>
</div>

Page layout

.cider-fixed adds centered padding with responsive max-width breakpoints. Override any value with Tailwind utilities.

HTML 
<!-- Default breakpoints -->
<div class="cider cider-fixed">
  ...
</div>

<!-- Override max-width -->
<div class="cider cider-fixed max-w-6xl">
  ...
</div>

<!-- Override padding -->
<div class="cider cider-fixed px-8">
  ...
</div>

<!-- Constrained fluid (no fixed breakpoints) -->
<div class="cider max-w-4xl mx-auto">
  ...
</div>

<!-- Custom fixed breakpoints -->
<div class="cider cider-fixed max-w-6xl xl:max-w-7xl">
  ...
</div>

Behind the scenes, .cider-fixed is just Tailwind utilities:

CSS 
.cider-fixed {
  @apply mx-auto px-5 max-w-xl md:max-w-2xl lg:max-w-4xl xl:max-w-6xl;
}
Breakpoint Viewport Max width
Default < 768px 576px (36rem)
md ≥ 768px 672px (42rem)
lg ≥ 1024px 896px (56rem)
xl ≥ 1280px 1152px (72rem)

Semantic containers

Apply .cider to any element — <header>, <main>, <footer>, or a <div>. Each opens its own auto-styling scope.

HTML 
<body>
  <header class="cider py-6">
    <h1>My App</h1>
  </header>

  <main class="cider py-8">
    <h2>Welcome</h2>
    <p>All elements inside are styled automatically.</p>
    <form>
      <label for="name">Name</label>
      <input type="text" id="name">
      <button class="btn-gray" type="submit">Send</button>
    </form>
  </main>

  <footer class="cider py-6">
    <small>&copy; 2026 My App</small>
  </footer>
</body>

Scope boundary

Add .cider-reset to stop auto-styling from leaking into nested components. Nest .cider again to re-open a new scope.

Reset boundary

Styled by .cider

This paragraph is auto-styled.

no .cider styling
HTML 
<div class="cider">
  <h1>Styled by .cider</h1>
  <p>This paragraph is auto-styled.</p>
  <div class="cider-reset">
    <code>no .cider styling</code>
  </div>
</div>

Re-enabling inside reset

Styled
Unstyled
Styled again
HTML 
<div class="cider">
  <code>Styled</code>
  <div class="cider-reset">
    <code>Unstyled</code>
    <div class="cider" style="margin-top:0.5rem">
      <code>Styled again</code>
    </div>
  </div>
</div>

Typography

Headings, paragraphs, lists, and inline elements are auto-styled inside a .cider scope.

Font sizes

Element Size Weight Line height Margin top Margin bottom
Body 17px Regular 1.47 — —
h1 34px Bold 1.21 32px 16px
h2 28px Bold 1.21 32px 12px
h3 22px Bold 1.27 24px 8px
h4 20px Semibold 1.25 16px 4px
small 13px Regular — — —
code 13px Regular — — —
HTML 
<table>
    <thead>
      <tr>
        <th>Element</th>
        <th>Size</th>
        <th>Weight</th>
        <th>Line height</th>
        <th>Margin top</th>
        <th>Margin bottom</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Body</td>
        <td>17px</td>
        <td>Regular</td>
        <td>1.47</td>
        <td>—</td>
        <td>—</td>
      </tr>
      <tr>
        <td><code>h1</code></td>
        <td>34px</td>
        <td>Bold</td>
        <td>1.21</td>
        <td>32px</td>
        <td>16px</td>
      </tr>
      <tr>
        <td><code>h2</code></td>
        <td>28px</td>
        <td>Bold</td>
        <td>1.21</td>
        <td>32px</td>
        <td>12px</td>
      </tr>
      <tr>
        <td><code>h3</code></td>
        <td>22px</td>
        <td>Bold</td>
        <td>1.27</td>
        <td>24px</td>
        <td>8px</td>
      </tr>
      <tr>
        <td><code>h4</code></td>
        <td>20px</td>
        <td>Semibold</td>
        <td>1.25</td>
        <td>16px</td>
        <td>4px</td>
      </tr>
      <tr>
        <td><code>small</code></td>
        <td>13px</td>
        <td>Regular</td>
        <td>—</td>
        <td>—</td>
        <td>—</td>
      </tr>
      <tr>
        <td><code>code</code></td>
        <td>13px</td>
        <td>Regular</td>
        <td>—</td>
        <td>—</td>
        <td>—</td>
      </tr>
    </tbody>
  </table>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

HTML 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Paragraphs & links

Design is not just what it looks like and feels like. Design is how it works. Every detail matters — the way text flows on a page, the spacing between elements, the careful balance of hierarchy.

When done right, typography becomes invisible, letting the content speak for itself.

HTML 
<p>Design is not just what it looks like and feels like. Design is how it works. Every detail matters — the way text flows on a page, the spacing between elements, the careful balance of hierarchy.</p>
<p>When done right, typography becomes invisible, letting the <a href="#">content speak for itself</a>.</p>

Inline text

Use the @import "ciderui" directive to include all styles.

Press Cmd + K to open the command palette.

Use mark to highlight important text.

Build interfaces with CSS and HTML.

This is helper text at a smaller size.

HTML 
<p>Use the <code>@import "ciderui"</code> directive to include all styles.</p>
<p>Press <kbd>Cmd</kbd> + <kbd>K</kbd> to open the command palette.</p>
<p>Use <mark>mark</mark> to <mark>highlight</mark> important text.</p>
<p>Build interfaces with <abbr title="Cascading Style Sheets">CSS</abbr> and <abbr title="HyperText Markup Language">HTML</abbr>.</p>
<p><small>This is helper text at a smaller size.</small></p>

Blockquote

Simplicity is the ultimate sophistication.
HTML 
<blockquote>
  Simplicity is the ultimate sophistication.
</blockquote>

Unordered list

  • Clean, semantic HTML structure
  • Apple-inspired design tokens
  • Dark mode support built-in
HTML 
<ul>
  <li>Clean, semantic HTML structure</li>
  <li>Apple-inspired design tokens</li>
  <li>Dark mode support built-in</li>
</ul>

Ordered list

  1. Install the Tailwind CSS plugin
  2. Import the ciderui stylesheet
  3. Start building beautiful interfaces
HTML 
<ol>
  <li>Install the Tailwind CSS plugin</li>
  <li>Import the ciderui stylesheet</li>
  <li>Start building beautiful interfaces</li>
</ol>

Description list

Cider UI
Apple-aesthetic UI components as a Tailwind CSS v4 plugin.
Dark mode
Add class="dark" to your html element. All components adapt automatically.
Framework
No framework required. Pure CSS with optional vanilla JS.
HTML 
<dl>
  <dt>Cider UI</dt>
  <dd>Apple-aesthetic UI components as a Tailwind CSS v4 plugin.</dd>
  <dt>Dark mode</dt>
  <dd>Add class="dark" to your html element. All components adapt automatically.</dd>
  <dt>Framework</dt>
  <dd>No framework required. Pure CSS with optional vanilla JS.</dd>
</dl>