# Freeday **English** · [Bahasa Indonesia](README.id.md) > **More free days for devs — the UI kit is ready to use.** [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/) [![Release](https://img.shields.io/badge/release-v1.18.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.18.0) A token-driven, framework-agnostic UI kit — one source of truth for color, typography, spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`. **Living reference:** **[cahyo-dimas.github.io/freeday-ui-kit](https://cahyo-dimas.github.io/freeday-ui-kit/)** — or open `docs/index.html` directly in a browser. > 🚀 **Starting a project?** Step-by-step per stack (HTML · Vue · React · Blazor): **[`docs/getting-started.md`](docs/getting-started.md)**. ## Build ```bash node tokens/build.mjs # tokens.json -> dist/freeday.tokens.css; bundles dist/freeday.css; # dist/freeday.bundle.css (tokens+components); copies dist/*.js + dist/freeday.js npm test # build-transform tests + WCAG contrast (node:test) ``` `dist/` is committed — consumers don't have to build it themselves. ## Use in a project **As a package (projects with a bundler — Vue/React/Blazor/Vite):** ```bash npm i @cahyo-dimas/freeday ``` ```js import '@cahyo-dimas/freeday/css'; // tokens + components (single file) import '@cahyo-dimas/freeday'; // all JS enhancers (auto-init [data-fdy-*]) // granular if needed: '@cahyo-dimas/freeday/tokens' · '@cahyo-dimas/freeday/css/components' · '@cahyo-dimas/freeday/enhancers/' ``` Set the theme on your app root: ``. `dist/` is committed and published, so install needs **no build step**; minification is left to the consumer's bundler. Because it's on **public npm**, `npm ci` runs in CI without auth or an SSH key. > **From source (no registry):** `npm i github:cahyo-dimas/freeday-ui-kit`. **Or link the files directly (no build):** ### 1. Include the CSS (required) ```html ``` Component classes are prefixed `fdy-` (e.g. `fdy-btn`, `fdy-card`, `fdy-badge`). Use them directly in any framework's markup — Vue, React, Blazor, or plain HTML. > **⚠️ Load the fonts — the package doesn't.** The type tokens name **Sora** / **IBM Plex Sans** / > **JetBrains Mono** but Freeday bundles no font files. Load them (e.g. `@import '@fontsource/sora/700.css'` > …) or override `--font-display`/`--font-body`/`--font-mono` — otherwise the kit renders in the system > fallback and looks unfinished. See [`docs/getting-started.md` §Core concepts](docs/getting-started.md). > **Which token/role to use when → [`USAGE.md`](USAGE.md).** Freeday enforces consistent *values*; > `USAGE.md` is the doctrine that also makes *decisions* consistent — type roles (`.fdy-title-page/-section/-card`), > spacing rhythm, elevation, one-primary-per-screen, the `--tone-1…8` categorical palette, and the page- > composition primitives (`.fdy-page`, `.fdy-page-section`, `.fdy-stats`). Every app starts in `.fdy-app`. > **Scope: components + tokens, not layout.** Freeday owns components and design tokens; the only > layout helpers are `.fdy-hidden` / `.fdy-visually-hidden` plus the page-composition primitives above. > Bring your own grid layer — pair it with a utility framework (Tailwind, UnoCSS…) run **utilities-only > with preflight OFF** (Freeday's `base.css` is the reset). `base.css` is a *light* reset (it doesn't > strip `ul`/`ol`/`p` margins — use `.fdy-list-reset` or a Freeday list component), and the > spacing/radius/duration scales are public custom properties (`--space-0`…`--space-24`, …) you can > build your utility theme on. Full notes: [`docs/getting-started.md` §Core concepts](docs/getting-started.md). > `.fdy-btn` is **already** the primary button — there's no separate `.fdy-btn--primary` modifier. > Modifiers for other variants: `--ghost`, `--danger`, `--text`, `--sm`, `--lg`, `--icon` > (see `docs/index.html`). ### 2. Include the JS enhancers (optional, zero dependencies) Interactive components (dropdown, tabs, table, choose-from-list, datepicker, upload, toast) need JS. Two ways: ```html ``` Each one auto-inits `[data-fdy-*]` on `DOMContentLoaded` — idempotent, progressive enhancement. | Enhancer | Markup hook | Event / API | |---|---|---| | `freeday-select` | `[data-fdy-combo]` | `fdy-change` `{value}` · `window.FreedayCombo` | | `freeday-tabs` | `[data-fdy-tabs]` | `window.FreedayTabs` | | `freeday-table` | `[data-fdy-table]` (+ `[data-fdy-filter]`, `[data-fdy-table-bulk]`) | `fdy-table-change` · `window.FreedayTable` | | `freeday-cfl` | `[data-fdy-cfl]` → `