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

@ziioapp/ui

v0.2.1

Published

Base UI components with all official shadcn runtime styles and palettes

Downloads

199

Vulnerabilities

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

Links

Git

Maintainers

gitforziiogitforziio

Keywords

reactbase-uishadcncomponentstailwindcssthemes

Readme

@ziioapp/ui

English | 简体中文 · npm

React components built on Base UI and a pinned shadcn/ui source baseline, with runtime styles and color palettes. Maintained by ziioai.

Features

  • 62 Base UI components with ESM exports and TypeScript declarations.
  • 8 styles: Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea.
  • 24 theme palettes, light and dark modes, and chart colors.
  • Switch styles with a body class without remounting components.
  • Full or per-style precompiled CSS. No Tailwind build is required to use the precompiled styles.
  • Lucide icons; no bundled fonts or additional icon families.
  • Locked upstream sources, file hashes, and a reproducible generation workflow.

Install

pnpm add @ziioapp/ui react react-dom

Requires React and React DOM 19.2.4 or later within React 19. The package is ESM-only. Tailwind CSS is optional when using precompiled CSS; source CSS requires Tailwind CSS 4.3.

Quick start

Import the stylesheet once in your application entry:

import "@ziioapp/ui/styles.css";
import { Button } from "@ziioapp/ui/components/button";

export function App() {
  return <Button>Get started</Button>;
}

Set the initial theme classes in your HTML before the first paint:

<html class="light base-color-zinc theme-color-indigo">
  <body class="style-mira">
    <div id="root"></div>
  </body>
</html>

Use dark instead of light for dark mode. The full stylesheet includes a Tailwind reset, component utilities, default Zinc variables, all official palettes, and all eight styles. It does not include font files or generate utilities for your own application markup.

Styles and colors

Place one style-* class on body; place base-color-*, theme-color-*, and optional chart-color-* classes on html. Replace the previous class in each category when switching. Portaled components share the document's body style.

document.body.classList.replace("style-mira", "style-nova");
document.documentElement.classList.replace("light", "dark");
document.documentElement.classList.replace(
  "theme-color-indigo",
  "theme-color-emerald",
);

Available styles: vega, nova, maia, lyra, mira, luma, sera, rhea.

Base colors: neutral, stone, zinc, mauve, olive, mist, taupe.

Theme colors: neutral, stone, zinc, mauve, olive, mist, taupe, amber, blue, cyan, emerald, fuchsia, green, indigo, lime, orange, pink, purple, red, rose, sky, teal, violet, yellow.

Programmatic palette and style lists are available from @ziioapp/ui/lib/official-themes. Local component size props remain independent of the global style. Theme persistence and system color-scheme detection belong to the consuming application.

Load only the styles you need

Replace the full stylesheet import with the base CSS and selected styles:

import "@ziioapp/ui/base.css";
import "@ziioapp/ui/styles/compiled/mira.css";
import "@ziioapp/ui/styles/compiled/nova.css";

Do not also import @ziioapp/ui/styles.css. The base stylesheet provides shared utilities and palettes; each additional file supplies one style.

Component imports

Import components through individual subpaths:

import { Button } from "@ziioapp/ui/components/button";
import { Input } from "@ziioapp/ui/components/input";
import { Card, CardContent } from "@ziioapp/ui/components/card";
import { cn } from "@ziioapp/ui/lib/utils";

Components use Base UI APIs. For custom triggers, use the component's render API where supported. Date Picker, Data Table, and Typography are compositions rather than separate generic component exports.

Development

This repository is a pnpm monorepo. The library lives in packages/ui.

| Tool | Version | | --- | --- | | Node.js | 24.19.0 | | pnpm | 11.23.0 | | TypeScript | 6.0.3 | | Biome (global) | 2.4.12 |

pnpm install --frozen-lockfile
pnpm typecheck
pnpm upstream:check
pnpm build
pnpm pack:ui

Root workspace commands run across packages; use pnpm --filter @ziioapp/ui <command> for the library alone. pack:ui runs validation and creates a tarball in artifacts/. It does not publish.

Workspace exports point to source files. pnpm pack rewrites published exports to compiled JavaScript, declarations, and CSS. Use pnpm to pack this repository.

Upstream maintenance

packages/ui/upstream/lock.json records the source version and hashes. Keep upstream originals unchanged. Review candidate updates, then regenerate with pnpm --filter @ziioapp/ui upstream:apply and validate with pnpm upstream:check. Generated components live in src/shadcn; src/components contains legacy reference files and is not exported.

The build also generates a local shadcn Registry item at packages/ui/dist/registry/ziio-ui.json. It targets src/components/ziio-ui and src/styles/ziio-ui.css in consuming projects. The repository does not provide a hosted Registry endpoint.

License

MIT © ziioai. Includes shadcn/ui code with its original copyright notice. See third-party notices.