@ninna-ui/data-display

7 data display components for Ninna-UI — Card, Stat, Table, DataTable, Timeline, Tree, and Calendar.

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

Data display components for Ninna UI. All are custom implementations (no Radix dependency) with semantic HTML — <table>, <th scope>, <caption>, role="grid", role="tree", and proper aria-expanded attributes.

Installation

pnpm add @ninna-ui/data-display @ninna-ui/core

CSS Setup

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

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

Components

| Component | Description | Key Features | |-----------|-------------|-------------| | Card | Content container with header, body, footer | Variants, padding control, clickable | | Stat | Key metric display (label, value, delta) | Trend indicators, color-coded deltas | | Table | Semantic HTML table with styling | Striped, hoverable, compact modes | | DataTable | Feature-rich data grid | Sorting, pagination, column resize | | Timeline | Chronological event display | Vertical layout, icon markers | | Tree | Hierarchical tree view | Expandable nodes, keyboard navigation | | Calendar | Date display/selection | Month view, date range, keyboard nav |

Quick Start

import { Card, Stat, Table, Timeline } from "@ninna-ui/data-display";

function Dashboard() {
  return (
    <>
      {/* Stat Cards */}
      <Card>
        <Card.Header>Revenue</Card.Header>
        <Card.Body>
          <Stat value="$12,450" label="Total Revenue" delta="+12.5%" trend="up" />
        </Card.Body>
      </Card>

      {/* Table */}
      <Table>
        <Table.Header>
          <Table.Row>
            <Table.Head>Name</Table.Head>
            <Table.Head>Status</Table.Head>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Project Alpha</Table.Cell>
            <Table.Cell>Active</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    </>
  );
}

Accessibility

• Table — Semantic <table>, <th scope="col">, <caption> for screen readers
• DataTable — role="grid", sortable column headers with aria-sort
• Tree — role="tree" / role="treeitem", aria-expanded, arrow key navigation
• Calendar — role="grid", arrow key date navigation, aria-selected
• All components — forwardRef, data-slot, className support

Related Packages

• @ninna-ui/core — Design tokens and theme presets (required)
• @ninna-ui/layout — Layout components for page structure
• @ninna-ui/primitives — Base components (Badge, Text, Heading)
• All packages — Complete package list

License

MIT