Modern SCSS/CSS Kit & Living Styleguide

Getting Started & Installation

npm install filekat

// app/layout.tsx (Next.js) or src/main.jsx (Vite)
import 'filekat/kaui';

flutter pub add filekat

// lib/main.dart
import 'package:filekat/kaui.dart';

<!-- Stylesheet: CSS Tokens, Components & Icons -->
<link rel="stylesheet" href="https://longbm64.github.io/kaui/dist/kaui.min.css">

<!-- Official KAUI Runtime: Dropdowns, Navbar Submenus, Modals, Tables, Tabs -->
<script src="https://longbm64.github.io/kaui/dist/kaui.min.js" defer></script>

KAUI 1.1.0+ is Personal / Non-Commercial. Commercial use requires written permission: contact@filekat.com.

You are a frontend or Flutter developer building modern UI with the KAUI design system.

MANDATORY FIRST STEP: Use official KAUI components, widgets, tokens, and contracts. Never recreate custom CSS or widgets when KAUI provides built-in patterns.

1. PLATFORM INSTALLATION & IMPORTS:
   - Web / React / Next.js: Run `npm install filekat` and add `import 'filekat/kaui';` at the top level of the application (e.g. `app/layout.tsx`).
   - Flutter: Run `flutter pub add filekat` and add `import 'package:filekat/kaui.dart';`.
   - CDN / Static HTML: Include `<link rel="stylesheet" href="https://longbm64.github.io/kaui/dist/kaui.min.css">` and `<script src="https://longbm64.github.io/kaui/demo/demo.js" defer></script>` for interactive dropdowns, navbar submenus, modal overlays, and rich table features.

2. DOCUMENTATION & MANIFEST NAVIGATION:
   - Always read the latest index: https://longbm64.github.io/kaui/dist/versions/index.json
   - Construct and inspect the active version manifest: https://longbm64.github.io/kaui/dist/versions/<latest>/kaui-agent-manifest.json
   - Reference interactive live demos: https://longbm64.github.io/kaui/demo

3. SYSTEM CONVENTIONS & THEME TOKENS:
   - BEM Hierarchy: All class names strictly follow `.k-*` (e.g. `.k-btn`, `.k-card`, `.k-table`, `.k-modal`).
   - Tokens: Consume standard CSS variables `--k-primary`, `--k-bg`, `--k-text`, `--k-border`, `--k-spacing-*`, `--k-radius-*`.
   - Dark Theme: Native theme switching supported out-of-the-box via `[data-theme="dark"]`.

4. COMPONENT ARCHITECTURE & CONTRACTS:
   - Tables:
     * Base: `.k-table-wrap`, `.k-table`, `.k-table--striped`, `.k-table--hover`, `.k-table--bordered`, `.k-table--sm`.
     * Rich Cells: `.k-table__avatar` (photo or fallback initials), `.k-table__image`, `.k-table__chart` (`.k-table__chart-bar` with `--k-table-chart-value`), `.k-table__checkbox` (18x18px custom control with 0.5rem spacing to text label).
     * Alignment: Text columns are left-aligned (`text-align: left`), numbers & currency are right-aligned (`data-k-table-number` / `.k-table__numeric` with tabular-nums), visual indicators are centered (`.k-table__visual`).
     * Column Sum: Set `data-k-sum-columns=""` on table root; automatically formats currency with `$` and recalculates when filtering.
     * Frozen Columns: Multi-pane container `.k-table-frozen-container` with `.k-table-pane--fixed-left`, `.k-table-viewport--scrollable` (where horizontal scroll is strictly contained), and `.k-table-pane--fixed-right`.
   - Buttons: `.k-btn` (`--primary`, `--secondary`, `--outline`), loading state `.k-btn--loading` with `.k-btn__loader`.
   - Forms: `.k-input`, `.k-select`, `.k-checkbox`, `.k-radio`, `.k-form-group`, `.k-form-label`, `.k-form-feedback`.
   - Navigation: `.k-navbar` with responsive mobile offcanvas and viewport-aware nested submenus (`.is-dropup`, `.is-dropstart`).
   - Modals & Toasts: `.k-modal` (strictly contained scrolling in `.k-modal__body`), `.k-toast-container`, `.k-alert`.

5. LICENSING:
   - Personal and Non-Commercial use permitted. For commercial licenses contact: contact@filekat.com.