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

@kiberon-labs/ui

v1.2.1

Published

The Kiberon Labs design system: 46 shadcn-style React components (Radix + Tailwind) themed with the Kiberon design tokens. Dark mode is the brand-canonical appearance.

Vulnerabilities

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

Links

Git

Maintainers

kiberonlabsdevkiberonlabsdev

Keywords

Readme

Kiberon Labs UI

The Kiberon Labs design system: 46 shadcn-style React components (Radix + Tailwind) themed with the Kiberon design tokens. Dark mode is the brand-canonical appearance.

Storybook: https://storybook.kiberonlabs.com/

The brand and design language — voice, color, the crystal palette, type, spacing, and iconography — are documented in GUIDELINES.md and browsable in Storybook under Foundations.

Installation

This package is published to the Kiberon Labs GitHub Packages registry (not the public npm registry). Point the @kiberon-labs scope at it and authenticate with a GitHub token that has read:packages for the Kiberon-Labs org. Add to your project's .npmrc:

@kiberon-labs:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

Then install (with GITHUB_TOKEN set in your environment):

pnpm add @kiberon-labs/ui lucide-react

The package is framework- and Tailwind-agnostic: components ship plain CSS. Import the stylesheet once (app root / root layout):

import "@kiberon-labs/ui/css/index.css";

The design system is dark-only: add the dark class to <html> (or any ancestor).

The theme is set in Geist; load it in your app (e.g. @fontsource/geist).

Customizing styles

Two stable surfaces, no build tooling required:

  • Design tokens — override the CSS custom properties globally or per-scope. They ship in four layers: css/theme.css (semantic color/shadow/radius — --primary, --radius, --shadow-floating-small, …), css/brand.css (crystal palette --kl-* + signature gradients), css/typography.css (--font-sans, --text-*, tracking), and css/spacing.css (--space-*, --radius-*).
  • Component classes — every component uses stable prefixed classes (kl-button, kl-dialog__content, kl-badge--success); target them in your own CSS, or pass className (merged last) on any component.

To ship only the styles you use, import css/theme.css + css/brand.css + css/typography.css + css/spacing.css + css/base.css + individual files from css/components/ instead of css/index.css.

Usage

Everything is exported from the package root:

import { Button, Dialog, DialogContent, useToast, cn } from "@kiberon-labs/ui";

Brand assets

The Kiberon Labs logo, crystal mark, favicon, and palette ship in-repo under assets/ and are published with the package. Import them by path:

import logo from "@kiberon-labs/ui/assets/logo-dark-full.png";

They are also browsable in Storybook under Foundations → Brand.

Agent skill

The package ships an agent skill that teaches AI coding agents (Claude Code, etc.) how to install, theme, and compose the components — including the full per-component API reference.

To install it in a consuming project:

# from a project that has @kiberon-labs/ui installed
cp -r node_modules/@kiberon-labs/ui/skills/kiberon-ui .claude/skills/kiberon-ui

or copy skills/kiberon-ui/ from this repo into ~/.claude/skills/ for global availability.

Development

pnpm install
pnpm storybook        # component workbench at :6006
pnpm test             # vitest
pnpm build            # tsc + css assets -> dist/
pnpm build:storybook  # static storybook

Visual regression tests

Every Storybook story is screenshot-tested in dark mode — the design system's only theme (Playwright + Chromium; one-time setup: npx playwright install chromium):

pnpm test:visual          # build storybook + compare against baselines
pnpm test:visual:update   # rebaseline after an INTENTIONAL visual change

Baselines live in tests/visual/__screenshots__/<platform>/ and are committed. When a change alters rendering, the test fails and Playwright writes *-expected.png / *-actual.png / *-diff.png into test-results/; open the HTML report (npx playwright show-report) to view the before/after/diff side by side. Review the diff — if the change is intended, rebaseline and commit the updated PNGs with the code change so the visual delta is part of the PR.

Notes: external network requests are blocked during capture (image-bearing stories render their fallback states) and the calendar runs on a fixed clock, so runs are deterministic. Baselines are platform-specific (win32, linux, …) — running the suite on a new platform generates that platform's baselines on first test:visual:update.

Releases are managed with changesets (pnpm changeset), published from CI on master.

Notes

This is an ESM-only package.