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

@ninna-ui/primitives

v0.6.0

Published

14 primitive React UI components for Ninna UI - Button, Badge, Avatar, Text, Heading, Link, Code, Kbd, Divider, and more. Accessible, themeable, Tailwind CSS v4.

Downloads

345

Vulnerabilities

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

Links

Git

Maintainers

chnkc41chnkc41

Keywords

ninna-uireactcomponentsbuttonbadgeavatarheadingtextlinkdividercodekbdtypographyaccessibledata-slottailwindcsstailwindcss-v4ui

Readme

@ninna-ui/primitives

15 essential React UI building blocks - accessible buttons, typography, badges, avatars, and more. Pure React with zero Radix dependency, forwardRef on every component, and full Tailwind CSS v4 theming.

npm License: MIT

📖 Full Documentation →  |  📦 npm →  |  🐙 GitHub →

The foundational component set of Ninna UI - the building blocks every React app needs. Simple, accessible, and composable. Every component ships with forwardRef, className merging, data-slot targeting for surgical CSS overrides, and focus-visible keyboard accessibility out of the box.

Pure React - no Radix dependency. Lightweight, stateless, and tree-shakeable.

Installation

pnpm add @ninna-ui/primitives @ninna-ui/core

CSS Setup

@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";

@variant dark (&:is(.dark *));

HTML Setup

Add the data-theme attribute to your <html> element:

<html data-theme="default">

Components

| Component | Description | Variants | Colors | Sizes | |-----------|-------------|----------|--------|-------| | Button | Primary action element | solid, soft, outline, ghost, text | 8 | 5 | | IconButton | Icon-only button | solid, soft, outline, ghost | 8 | 5 | | Badge | Status/count indicator | solid, soft, outline | 8 | 3 | | Avatar | User image with fallback | - | 8 | 5 | | AvatarGroup | Grouped avatar stack | - | - | - | | Text | Paragraph/span text | - | - | 8 sizes | | Heading | h1–h6 with consistent scale | - | - | 8 sizes | | Link | Styled anchor element | - | - | - | | LinkOverlay / LinkBox | Clickable card pattern | - | - | - | | Code | Inline code highlight | solid, soft, outline, ghost | 8 | 3 | | Blockquote | Styled quotation block | bordered, filled, plain | 8 | - | | List / ListItem | Ordered/unordered lists | - | - | - | | Kbd | Keyboard shortcut indicator | - | - | 3 | | Mark | Highlighted text | - | 8 | - | | Divider | Horizontal/vertical separator | solid, dashed, dotted | 8 | 3 weights |

Quick Start

import { Button, Badge, Heading, Text, Avatar } from "@ninna-ui/primitives";

function Hero() {
  return (
    <div>
      <Badge color="primary" variant="soft">New</Badge>
      <Heading as="h1" size="4xl">Welcome</Heading>
      <Text size="lg" className="text-base-content/70">
        Build beautiful interfaces with Ninna UI
      </Text>
      <Button color="primary" size="lg">Get Started</Button>
    </div>
  );
}

All Exports

import {
  Button, type ButtonProps,
  IconButton, type IconButtonProps,
  Badge, type BadgeProps,
  Avatar, AvatarGroup, type AvatarProps, type AvatarGroupProps,
  Text, type TextProps,
  Heading, type HeadingProps,
  Link, type LinkProps,
  LinkOverlay, LinkBox, type LinkOverlayProps, type LinkBoxProps,
  Code, type CodeProps,
  Blockquote, type BlockquoteProps,
  List, ListItem, type ListProps, type ListItemProps,
  Kbd, type KbdProps,
  Mark, type MarkProps,
  Divider, type DividerProps,
} from "@ninna-ui/primitives";

Accessibility

Every primitive includes:

  • forwardRef + displayName on all components
  • data-slot attributes for surgical CSS targeting
  • focus-visible ring styles for keyboard users
  • className prop always accepted and applied last via cn()
  • ARIA attributes where applicable

Related Packages

License

MIT