-
Notifications
You must be signed in to change notification settings - Fork 0
Installation and Setup
Foscat edited this page Jul 11, 2026
·
1 revision
npm install ui-style-kit-cssRecommended for production apps that use one visual system:
import "ui-style-kit-css/minimal-saas.css";In v2.0.3, standalone style files import theme-colors.css and native-elements.css internally. If your CSS pipeline does not follow @import, import the shared layers first:
import "ui-style-kit-css/theme-colors.css";
import "ui-style-kit-css/native-elements.css";
import "ui-style-kit-css/minimal-saas.css";The explicit styles/* path is also available:
import "ui-style-kit-css/styles/minimal-saas.css";Use the combined build for runtime UI-system switchers and demos:
import "ui-style-kit-css/dist/ui-style-kit.css";The default combined build does not include the Interactive Surface bridge.
Import Interactive Surface itself, then either add the bridge separately:
import "interactive-surface-css/interactive-surface.css";
import "ui-style-kit-css/minimal-saas.css";
import "ui-style-kit-css/interactive-surface-bridge";Or use the opt-in full bundle with bridge:
import "interactive-surface-css/interactive-surface.css";
import "ui-style-kit-css/with-bridge.css";The bridge remains opt-in for v2.0.3. Use .interactive-surface on interactable elements with data-surface-variant and data-surface-level="1", "2", or "3" when the bridge is attached.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@latest/dist/ui-style-kit.min.css" />Local build:
<link rel="stylesheet" href="dist/ui-style-kit.css" />npm run build
npm run lint
npm test
npm run check:contrast
npm run check:packagePlaywright E2E:
npm run test:e2e:install:ci
npm run test:e2e- Apply all three attributes on your root container (usually
<body>):data-ui,data-theme,data-mode. - Use classes that match the selected style prefix.
- Keep prefix usage consistent in a component tree.
- Override color schemes through shared
--usk-*roles when changing palette values.
Example:
<body data-ui="bento" data-theme="ocean-steel" data-mode="dark">
<section class="bento-page">
<div class="bento-container bento-stack">
<article class="bento-card">
<h1 class="bento-title">Dashboard</h1>
<p class="bento-subtitle">Ready</p>
</article>
</div>
</section>
</body>document.body.dataset.ui = "cyberpunk";
document.body.dataset.theme = "midnight-gold";
document.body.dataset.mode = "dark";