Skip to main contentSkip to docs navigation
View on GitHub

Quick start

Load the pre-compiled Chassis CSS from a CDN into a single HTML file — no npm, no bundler, no build step.

On this page

The fastest way to try Chassis is to load the pre-compiled CSS from a CDN into an HTML file and open it in a browser. No build step, no package manager, no configuration.

For a real project, move on to Installation — the pre-built CSS uses the default Chassis brand and default settings, so you can't override tokens or feature flags without recompiling.

Try it in one HTML file

Create an index.html file with the markup below. The stylesheet and script both load from jsDelivr — no download or install needed.

HTML
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chassis CSS quick start</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/chassis-ui/css/dist/css/chassis.min.css" integrity="sha384-yvuk1frZQQsJ0Fs1SD81+hTLk23vxqDChqHIyeOUeodCKkmBeeKQs0Sy303W7/lx" crossorigin="anonymous">
  </head>
  <body>
    <main class="container py-large">
      <h1 class="mb-medium">Hello, world!</h1>
      <p class="fg-subtle mb-large">A button, a notification, a card — rendered with the default brand and settings.</p>

      <button class="button primary">Primary button</button>
      <button class="button primary outline">Outline button</button>

      <div class="notification info my-xlarge">
        Chassis ships with sensible defaults so a page like this looks reasonable with zero configuration.
      </div>
    </main>

    <!-- Optional: only needed if you use interactive components -->
    <script type="module" src="https://cdn.jsdelivr.net/gh/chassis-ui/css/dist/js/chassis.bundle.min.js" integrity="sha384-1v5NO74p30+9rrykflgr7I1xyNW4bDvDuiYZQv88sN2iS/F9SJrLBdArVwAroqLS" crossorigin="anonymous"></script>
  </body>
</html>

Open the file in a browser. You should see a styled heading, two buttons, and an info notification. That's a default Chassis page.

Required HTML

A few things in the markup above are non-negotiable:

  • HTML5 doctype. <!doctype html> on the first line. Without it, browsers run in quirks mode and several Chassis styles render unpredictably.
  • Viewport meta. <meta name="viewport" content="width=device-width, initial-scale=1">. Chassis is designed mobile-first; without the viewport tag, mobile devices render the page at desktop width and scale it down.
  • Language attribute. <html lang="en"> (or whatever language). Required for accessibility and for some Chassis features (dir="rtl" for right-to-left layouts; see RTL).

What you get with the pre-built CSS

The compiled bundle includes everything Chassis ships: the reset, the type system, the layout grid, every component, and every utility — built with the default chassis brand tokens and the default $enable-* settings.

What you don't get without a build:

  • Token overrides. The pre-built CSS is fixed at the brand it was compiled for. To use your own colors, typography, or spacing, you need to point Chassis at a different @chassis-ui/tokens build and recompile.
  • Settings overrides. Flags like $enable-fluid-font-sizes, $enable-dark-mode, or $enable-component-shadows are baked in at compile time. To change them, you need a Sass build.
  • Tree-shaking. The pre-built bundle includes every component and utility. To ship only what you use, import from source via Sass.

When you're ready for any of those, move on to Installation.

JavaScript components

Several Chassis components require JavaScript to function. If you only use static layout and content, you can omit the <script> tag entirely. The components that need it are:

  • Accordion — expand/collapse panels
  • Button — toggle active state
  • Carousel — slide behaviors, controls, indicators
  • Chip — dismissible chips and toggle state
  • ChipInput — multi-value input with chip creation and removal
  • Collapse — show/hide content
  • Combobox — searchable dropdown with filtering
  • Datepicker — date and date-range picker (requires vanilla-calendar-pro)
  • Dialog — display, focus management, scroll behavior
  • Drawer — slide-in panels
  • Menu — positioning and toggle (requires Floating UI)
  • NavOverflow — overflow detection and hidden-items menu
  • Notification — dismiss
  • OtpInput — one-time password field with per-digit distribution
  • Popover — display and positioning (requires Floating UI)
  • ScrollSpy — scroll-linked navigation updates
  • Strength — password strength indicator
  • Tab — tabbed interfaces
  • Toast — display and dismiss
  • Toggler — generic toggle for Collapse, Drawer, and other components
  • Tooltip — display and positioning (requires Floating UI)

The chassis.bundle.min.js in the example above includes Floating UI and vanilla-calendar-pro. If you don't use any of those components, swap it for the smaller chassis.min.js — it excludes both peer dependencies.

See JavaScript for data attributes, the programmatic API, and event names.

Next steps

  • Installation — the real setup with custom tokens and settings.
  • What is Chassis? — the conceptual frame for everything else in these docs.
  • Core Concepts — design tokens, the color system, the context class, and component anatomy.