Quick Start

Get up and running with Shift CSS in minutes

Basic Setup

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/@shift-css/core" />
    <title>My Shift CSS App</title>
  </head>
  <body>
    <div s-surface="raised" style="padding: var(--s-space-6);">
      <h1>Hello Shift CSS!</h1>
      <p
        style="color: var(--s-text-secondary); margin-bottom: var(--s-space-4);"
      >
        This text automatically adapts to light/dark mode.
      </p>
      <button s-btn="primary">Primary Button</button>
      <button s-btn="secondary">Secondary</button>
    </div>
  </body>
</html>

Customizing Your Brand

Override seed hues to change the entire color palette:

<style>
  :root {
    /* Change primary from blue (250) to purple (280) */
    --shift-hue-primary: 280;

    /* Make grays have a purple tint */
    --shift-hue-neutral: 280;
  }
</style>

Using Components

Surfaces

<div s-surface="flat">Default flat surface</div>
<div s-surface="raised">Elevated surface with shadow</div>
<div s-surface="sunken">Recessed surface</div>

Buttons

<button s-btn="primary">Primary</button>
<button s-btn="secondary">Secondary</button>
<button s-btn="outline">Outline</button>
<button s-btn="ghost">Ghost</button>
<button s-btn="link">Link</button>

Cards

<article s-card>
  <header s-card-header>
    <h3>Card Title</h3>
  </header>
  <div s-card-body>Card content goes here.</div>
  <footer s-card-footer>
    <button s-btn="primary" s-size="sm">Action</button>
  </footer>
</article>

Inputs

<div s-field>
  <label s-field-label for="email">Email</label>
  <input s-input type="email" id="email" placeholder="you@example.com" />
</div>

Dark Mode

Shift CSS automatically respects prefers-color-scheme. No classes needed! Toggle your system’s dark mode to see it in action.

To force a specific theme, use the color-scheme property:

/* Force light mode */
:root {
  color-scheme: light;
}

/* Force dark mode */
:root {
  color-scheme: dark;
}

Attribute-Based API

Shift CSS uses semantic attribute modules instead of modifier classes:

Old PatternNew Pattern
class="btn btn-primary"s-btn="primary"
class="surface surface--raised"s-surface="raised"
class="card"s-card
class="input"s-input

This creates a strict, declarative API that’s easier to maintain and nearly impossible to break with conflicting classes.
Search