Primitives
14 componentsFoundational UI building blocks — buttons, badges, typography, links, and more. These are the atoms of the Ninna UI design system.
@ninna-ui/primitivespnpm add @ninna-ui/primitivesRequires @ninna-ui/core (auto-installed) + CSS setup.
Features
- ✓16 components for building any UI
- ✓8 color variants per component
- ✓5 size options (xs–xl)
- ✓Polymorphic 'as' prop on typography
- ✓Full ref forwarding support
- ✓Tree-shakeable — import only what you use
Components
Button
Primary action trigger with variants, sizes, loading states, and icon support.
Badge
Small status indicator for counts, labels, and notifications.
Avatar
User profile image with fallback initials and status indicators.
IconButton
Icon-only button with accessible label for toolbar actions.
Heading
Semantic heading element (h1–h6) with size and weight control.
Text
Body text with size, weight, alignment, and truncation options.
Link
Styled anchor with underline variants and external link support.
LinkOverlay
Makes an entire card or container clickable via a single link.
Divider
Visual separator with horizontal/vertical orientation and variants.
Code
Inline code snippet with monospace styling.
Blockquote
Styled quotation block with accent border and variants.
List
Ordered and unordered lists with custom markers and spacing.
Kbd
Keyboard shortcut display with platform-aware styling.
Mark
Highlighted text with customizable color.
Quick Start
import { Button, Badge, Avatar } from "@ninna-ui/primitives";