DOCSEARCHbyAlgolia
Submit Docs

Chassis UI Documentation

website·Indexed 30 days ago

https://chassis-ui.com/

A CSS framework providing a comprehensive set of components, utilities, and helpers. Features include a Sass-based Utility API, fluid sizing, and a wide array of UI components such as Carousels, Drawers, Popovers, Tooltips, and Steppers, all designed with WCAG 2.2 compliance and accessibility in mind.

Tokens
202.2K
Snippets
1K
Records
1.7K
Agent score
50%

What's inside Chassis UI

  1. Overview of Multi-Brand Token Inheritance

    Chassis UI Tokens is a system designed for complex multi-brand organizations to manage multiple brand identities, themes, and platforms from a single repository. It uses a Git-based version control system to track token changes and review diffs via pull requests. The system is W3C Design Tokens Community Group (DTCG) compliant and platform-agnostic, supporting web, iOS, and Android outputs.

  2. Overview of the Chassis design system architecture

    Chassis is a design system infrastructure that solves the problem of design drift and scattered decisions across multiple platforms, brands, and teams. Unlike traditional systems that start with components, Chassis uses design tokens as the single source of truth. It eliminates the 'translation layer' between design and code by generating Figma variables, web styles, and native iOS/Android code from the same token source. This ensures that a design decision (e.g., a color name or value) remains identical across all implementations without manual re-implementation or approximation.

  3. Overview of Grid Gutters

    Gutters are the gaps between column content in a flexbox grid. The .row component defines two CSS custom properties that columns consume: --gutter-x (controlling padding-inline on columns) and --gutter-y (controlling margin-block-start). Gutter classes override these properties at the row level. The default horizontal gutter is 1.5rem ($grid-gutter-x), and the default vertical gutter is 0 ($grid-gutter-y).

  4. Overview of the Chassis CSS ecosystem

    Chassis CSS is a design-system-first framework designed to keep Figma and code in sync across multiple brands and platforms. It relies on a single source of truth called Chassis Tokens, which are authored in Figma via Tokens Studio, stored as JSON, and processed by Style Dictionary into platform-specific outputs (SCSS for web, Swift for iOS, XML for Android).

    The ecosystem consists of three main parts:

    1. Chassis Tokens: The source of truth for all visual values (colors, spacing, typography).
    2. Chassis CSS: Consumes tokens to generate a CSS framework including color systems, layout utilities, and component styles.
    3. Chassis Icons: An icon library (SVG sprites and icon fonts) governed by the same token system.

  5. Overview of Fluid Sizing in Chassis CSS

    Chassis CSS uses native CSS clamp() to scale font sizes and spacing values smoothly between a minimum and maximum viewport width. This eliminates the need for breakpoints or extra classes for fluid transitions. By default, values interpolate linearly between 360px (minimum) and 1280px (maximum).
    /* Example compiled output for a 4rem font size */
font-size: clamp(3.4rem, 3.165rem + 1.043vw, 4rem);

  6. Overview of the Chassis design system toolkit

    Chassis is an open-source design system toolkit designed for products spanning multiple brands and platforms. It is composed of several independent projects under the MIT license, centered around a core set of design tokens that all other projects build upon.

  7. Overview of Chassis CSS integration paths

    Chassis CSS offers three primary ways to integrate the framework depending on the project's needs and lifespan:

    1. Quick Start (CDN): Load compiled CSS from a CDN into a single HTML file. This is intended for evaluation or rapid prototyping and requires no npm, bundler, or configuration.
    2. Installation (npm Dependency): Install @chassis-ui/css and its peer dependency @chassis-ui/tokens via pnpm or npm. This is the standard setup for most projects.
    3. Clone and Customize (Forking): For teams building a long-lived design system, the recommended path is to fork the Chassis repository, point the _vendor.scss import to a custom token build, and own the CSS build entirely.

  8. Integrate Chassis CSS with Tailwind CSS v4

    Chassis CSS provides a specific entry point for Tailwind CSS v4 (version 4.1+ required) that exposes Chassis components (e.g., .button.outline, .card) and utilities (e.g., fg-primary) as Tailwind @utility rules. This allows the use of Tailwind variants like dark:, lg:, and hover: on Chassis classes. To avoid collisions with Tailwind's own theme keys, Chassis requires a custom-property prefixing step using chassisPrefix({ tailwind: true }) from @chassis-ui/css/postcss before the CSS reaches the Tailwind compiler.

  9. Use overlays inside Modals

    Tooltips, popovers, toasts, and menus are fully compatible inside modal dialogs. They are automatically scoped to the dialog element for correct top-layer positioning and are dismissed automatically when the modal closes.

  10. Understand the Chassis UI architecture and package ecosystem

    Chassis is a design system foundation consisting of five core MIT-licensed packages that connect Figma design decisions to production code. These packages are independently useful and can be adopted individually or together to build a custom design system across multiple platforms. The ecosystem includes:

    • chassis-tokens: Design tokens and transformers
    • chassis-css: CSS framework
    • chassis-react: React components
    • chassis-figma: Figma component library
    • chassis-icons: Icon library and sprites
    • chassis-assets: Asset distribution
    • chassis-website: Documentation and site source

  11. Understand the Chassis CSS architectural data flow

    Chassis CSS follows a specific data flow to translate design decisions from Figma into rendered components. This architecture allows for multi-brand and multi-theme builds by layering tokens and variables. The flow is as follows:

    1. Chassis Tokens (Figma): The single source of truth for visual decisions.
    2. CSS Variables: Tokens surface as --cx-*-{step} custom properties.
    3. Context Palettes: Color tokens are grouped into palettes (one per context color), surfaced as --cx-{ctx}-{tok}.
    4. Body Variables: The .context class re-aims the active palette's tokens onto canonical body variables (e.g., --cx-fg-main, --cx-bg-main).
    5. Components: Components (e.g., .button, .notification) read these body variables or use component-scoped variables (e.g., --cx-button-padding-y) that alias back to the canonical names.
    Chassis Tokens  →  CSS variables  →  Context palettes  →  Body variables  →  Components
   (Figma)         (--cx-*-{step})    (--cx-{ctx}-{tok})    (--cx-{tok})       (.button, .notification, …)

  12. Understand component-level CSS variables

    Chassis CSS assigns variables at the base component level (e.g., .navbar) to prevent style leakage into nested elements and to allow restyling after Sass compilation. This approach is used in Navbars, the CSS grid system (primarily for gutters), and Tables.