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

@koduhai/design-system

v1.0.0

Published

Koduh AI Design System — custom-built, MUI-free

Vulnerabilities

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

Links

Git

Maintainers

koduhaikoduhai

Keywords

reactdesign-systemcomponent-libraryuicomponentscss-modulesdesign-tokensaccessibilitya11ywcagdark-modetypescript

Readme

@koduhai/design-system

npm version CI License: MIT

A from-scratch React component library with zero runtime dependencies and no Material UI, Emotion, or other third-party component/styling library. Styling is zero-runtime: design tokens compile to CSS custom properties and component styles are CSS Modules. Dark-first theming, 80+ accessible components, and WCAG AA as a hard requirement.

Features

  • 80+ components across layout, typography, forms, overlays, data display, navigation, and feedback.
  • Zero runtime dependencies. React 18 and 19 are peer dependencies.
  • Zero-runtime styling. Tokens compile to --ku-* CSS custom properties; components ship as hashed CSS Modules. No runtime CSS-in-JS.
  • Dark-first theming via a data-theme attribute, with a .dark/.light class fallback so Tailwind darkMode: 'class' consumers get the tokens for free.
  • Accessibility built in. WCAG AA verified, color is never the only signal, prefers-reduced-motion is honored, and every component is axe-tested in both themes.
  • Platform primitives, no heavy deps. Overlays use the native <dialog>, the Popover API, and CSS anchor positioning (with a JS fallback where those are not yet supported).
  • Typed, tree-shakeable ESM + CJS builds with .d.ts types.

Installation

npm install @koduhai/design-system

React is a peer dependency, so install it too if you have not already:

npm install react react-dom

Quick start

Import the theme stylesheet once at your app entry, wrap your tree in KoduhThemeProvider, and use components:

// app entry (e.g. main.tsx)
import '@koduhai/design-system/theme.css';
import { KoduhThemeProvider } from '@koduhai/design-system';

export function Root() {
  return (
    <KoduhThemeProvider defaultMode="dark">
      <App />
    </KoduhThemeProvider>
  );
}
import { Button, Card, CardBody } from '@koduhai/design-system';

export function App() {
  return (
    <Card>
      <CardBody>
        <Button tone="primary" onClick={() => alert('Hi')}>
          Get started
        </Button>
      </CardBody>
    </Card>
  );
}

Theming

KoduhThemeProvider sets data-theme on <html>, persists the choice to localStorage, and exposes a useColorMode() hook:

import { useColorMode } from '@koduhai/design-system';

function ThemeToggle() {
  const { mode, toggleMode } = useColorMode();
  return <button onClick={toggleMode}>Theme: {mode}</button>;
}

All colors, spacing, radii, and typography are CSS custom properties prefixed --ku-, so you can read or override them in your own CSS.

SSR / no-flash

On server-rendered pages, the provider applies data-theme after hydration, which can flash the wrong theme on first paint. Drop KoduhThemeScript into your document <head> to set the theme synchronously before paint:

import { KoduhThemeScript } from '@koduhai/design-system';
// ...
<head>
  <KoduhThemeScript defaultMode="dark" />
</head>;

See docs/ssr.md for Next.js and Remix usage.

Tailwind

A @koduhai/design-system/tailwind-preset entry maps the semantic color tokens and brand ramp onto Tailwind's theme as var(--ku-*) values, so you can use utilities like bg-primary or bg-brand-500 alongside the components. See docs/tailwind-consumer-compatibility.md and the runnable examples/tailwind app.

Browser support

Modern evergreen browsers. Overlay positioning uses the Popover API and CSS anchor positioning, which are Chromium-first; on browsers without them the library falls back to JS positioning.

Documentation

Contributing

Contributions are welcome. See CONTRIBUTING.md for setup, conventions, and the local gate to run before opening a pull request, and CODE_OF_CONDUCT.md. To report a security issue, see SECURITY.md.

License

MIT (c) Koduh AI.