Installation

How to install and set up Shift CSS in your project

Package Manager

# npm
npm install @shift-css/core

# pnpm
pnpm add @shift-css/core

# yarn
yarn add @shift-css/core

Then import in your CSS or JavaScript:

/* In your CSS */
@import "@shift-css/core";
// Or in JavaScript/bundler
import "@shift-css/core";

CDN

For quick prototyping or static sites:

<link rel="stylesheet" href="https://unpkg.com/@shift-css/core" />

Or use the minified version:

<link rel="stylesheet" href="https://unpkg.com/@shift-css/core/min" />

Subpath Exports

Import only what you need for smaller bundle sizes:

/* Full framework */
@import "@shift-css/core";

/* Minified */
@import "@shift-css/core/min";

/* Individual layers */
@import "@shift-css/core/reset";
@import "@shift-css/core/tokens";

/* Individual components */
@import "@shift-css/core/components/button";
@import "@shift-css/core/components/card";
@import "@shift-css/core/components/input";
@import "@shift-css/core/components/modal";
@import "@shift-css/core/components/surface";

/* Individual utilities */
@import "@shift-css/core/utils/layout";
@import "@shift-css/core/utils/spacing";
@import "@shift-css/core/utils/flex";
@import "@shift-css/core/utils/typography";
@import "@shift-css/core/utils/visibility";

Minimal Setup Example

For a lightweight setup with just buttons and spacing:

@import "@shift-css/core/reset";
@import "@shift-css/core/tokens";
@import "@shift-css/core/components/button";
@import "@shift-css/core/utils/spacing";

Using the CLI

The CLI helps you set up Shift CSS with the correct layer hierarchy:

npx shift-css init

It creates a shift.config.json and scaffolds your main stylesheet with proper cascade layers. Works for both new projects and existing codebases with Bootstrap/Tailwind. See CLI Setup for details.

Browser Support

Shift CSS targets cutting-edge 2025 browsers:

  • Chrome 131+
  • Firefox 133+
  • Safari 18+

Features like contrast-color() have progressive fallbacks for slightly older browsers.
Search