Getting Started

This guide walks you through installing the katanakit-js SCSS framework and writing your first styles.

Prerequisites

• Node.js >= 18
• Dart Sass (the sass npm package)

Installation

npm install katanakit-js

CDN (no install required)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katanakit-js@latest/dist/styles.css" />

Path 1: Full stylesheet

The simplest approach — import everything:

@use "katanakit-js/scss/main";

This emits:

• CSS reset (preflight)
• Design tokens as custom properties on :root
• Color utility classes (.text-*, .bg-*, .border-*, .hover-*)
• All opt-in utilities (sizing, flex, effects, layout, spacing)

Path 2: Compose from modules

Import only what you need:

@use "katanakit-js/scss/functions" as f;
@use "katanakit-js/scss/variables" as v;
@use "katanakit-js/scss/mixins" as m;

.my-component {
  padding: v.spacing(4);
  border-radius: v.radius("lg");
  box-shadow: v.shadow("md");

  @include m.md {
    padding: v.spacing(8);
  }
}

Compile

From your project root, with Dart Sass installed:

npx sass --load-path=node_modules --no-source-map --style=compressed \
  node_modules/katanakit-js/scss/main.scss dist/css/main.css

Overriding tokens

Override any !default map before importing:

@use "katanakit-js/scss/variables" as v with (
  $spacing-scale: (
    "0": 0,
    "1": 0.5rem,
    "2": 1rem,
    "4": 2rem
  )
);

Next steps

• Design Tokens — all token maps and access functions
• Colors · Dark Mode — palettes and theming
• Breakpoints — responsive mixins
• Grid · Flexbox — layout mixins
• Utilities — the class catalog
• API Reference — every function, mixin and map