npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

ui-style-kit-css

v1.2.2

Published

CSS theme and UI style preset library for accessible websites, dashboards, admin interfaces, and client-facing pages.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

foscatfoscat

Keywords

cssuithemestheme-systemstyle-kitdesign-systemcss-libraryaccessibilitycolor-themesdark-modelight-modehigh-contrastdashboardadmin-panelweb-designresponsive-designcss-variablescustom-propertiesbentominimal-saasglassmorphismskeuomorphismneumorphismcyberpunky2kbrutalismretrofuturismbauhaus

Readme

UI Style Kit CSS

UI Style Kit CSS is a CSS-only theme and UI style preset library for accessible websites, dashboards, admin interfaces, and customer-facing pages.

It is separate from, but complementary to, Interactive Surface CSS. Use UI Style Kit CSS for visual identity, color themes, UI presets, layout mood, and native HTML styling. Use Interactive Surface CSS for interaction-state animation systems and surface behavior.

Features

  • 11 UI style systems
  • 10 shared color schemes
  • light, dark, and contrast modes
  • Combined CSS bundle and optional per-style imports
  • Scoped native HTML element coverage
  • Visible :focus-visible defaults
  • Skip-link and visually-hidden helpers per style prefix
  • Optional bridge tokens for interactive-surface-css
  • Reduced-motion, high-contrast, forced-colors, and print support
  • Cascade-layered CSS for easier consumer overrides
  • No runtime dependencies

Install

npm install ui-style-kit-css

Import

Full bundle:

import "ui-style-kit-css/dist/ui-style-kit.css";

Single style system:

import "ui-style-kit-css/styles/minimal-saas.css";
import "ui-style-kit-css/styles/cyberpunk.css";

Shortcut imports are also exported:

import "ui-style-kit-css/minimal-saas.css";
import "ui-style-kit-css/retro-glass.css";

Optional bridge for Interactive Surface CSS:

import "ui-style-kit-css/interactive-surface-bridge";

CDN usage

After publishing to NPM:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@latest/dist/ui-style-kit.min.css" />

For production, pin a version:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ui-style-kit.min.css" />

Basic usage

<body data-ui="minimal-saas" data-theme="arctic-indigo" data-mode="light">
  <main class="saas-page">
    <section class="saas-container saas-stack">
      <article class="saas-card">
        <h1 class="saas-title">UI Style Kit CSS</h1>
        <p class="saas-subtitle">Switch UI systems, themes, and modes with attributes.</p>
        <button class="saas-button saas-button-primary">Primary Action</button>
      </article>
    </section>
  </main>
</body>

Dynamic switching

document.body.dataset.ui = "cyberpunk";
document.body.dataset.theme = "midnight-gold";
document.body.dataset.mode = "dark";

UI systems

| UI style | data-ui | Class prefix | Best for | |---|---:|---:|---| | Minimal SaaS | minimal-saas | saas | dashboards, admin tools, SaaS apps | | Bento UI | bento | bento | landing pages, feature sections, showcases | | Maximalist / Playful | maximalist | max | creators, entertainment, bold client sites | | Bauhaus / Swiss Modern | bauhaus | bau | agencies, editorial layouts, design-forward brands | | Skeuomorphic / Tactile | tactile | tactile | premium tactile interfaces, control panels | | Neumorphism | neumorphism | neo | soft dashboards, experimental UI | | Retrofuturism | retrofuturism | retro | futuristic portfolios and product pages | | Brutalism | brutalism | brutal | bold creative websites | | Cyberpunk | cyberpunk | cyber | security, gaming, encryption, tech demos | | Y2K | y2k | y2k | nostalgic, playful, fashion/music/event sites | | Retro Glass | retro-glass | rg | futuristic glass dashboards and hero sections |

Color themes

midnight-gold
ocean-steel
forest-moss
sunset-ember
royal-plum
graphite-cyan
desert-sage
rose-quartz
cyber-lime
arctic-indigo

Modes

light
dark
contrast

Native HTML coverage

Each style system scopes defaults under [data-ui="..."] and covers common native elements, including:

  • headings, paragraphs, links, lists, blockquotes, code, pre, mark, abbr
  • images, media, figures, captions
  • forms, fieldsets, labels, inputs, textareas, selects, checkboxes, radios, range, color, file inputs
  • buttons and submit/reset controls
  • tables and captions
  • details, summary, dialog, progress, and meter

CSS improves accessibility presentation, but it cannot guarantee accessibility by itself. Use semantic HTML, real labels, keyboard-safe JavaScript, meaningful link/button text, and correct ARIA state management.

Cascade layers

The library styles are wrapped in @layer ui-style-kit.*. Unlayered consumer CSS can override the library without specificity fights:

[data-ui="minimal-saas"][data-theme="arctic-indigo"] {
  --saas-primary-rgb: 72 91 255;
}

File structure

ui-style-kit-css/
  package.json
  README.md
  LICENSE
  CHANGELOG.md
  STYLE-MAP.md
  dist/
    ui-style-kit.css
    ui-style-kit.min.css
  styles/
    minimal-saas.css
    bento.css
    maximalist.css
    bauhaus.css
    tactile.css
    neumorphism.css
    retrofuturism.css
    brutalism.css
    cyberpunk.css
    y2k.css
    retro-glass.css
    interactive-surface-bridge.css
  docs/
    TOKENS.md
    STYLE-GUIDE.md
    PUBLISHING.md
  demo/
    index.html

Development checks

npm run check
npm run pack:dry-run

npm run check rebuilds the bundle, runs stylelint, verifies package metadata, and checks core contrast pairs. Optional Playwright visual smoke tests are available through npm run test:visual after installing dev dependencies.

License

MIT