@practics/ui

A React component library built with Tailwind CSS and Radix UI primitives.

Installation

npm install @practics/ui

Setup

Import the styles in your app's entry file:

import "@practics/ui/styles";

Make sure your project has Tailwind CSS configured. The components use Tailwind classes and rely on your Tailwind setup for styling.

Usage

import { Button, Badge, Toaster } from "@practics/ui";

export default function App() {
  return (
    <div>
      <Button variant="default">Click me</Button>
      <Badge variant="success">Active</Badge>
      <Toaster position="bottom-right" />
    </div>
  );
}

Preview

Buttons & Badges

Alerts

Card & Table

Navigation

Toast

Components

Layout

| Component | Description | |---|---| | Box | Base layout primitive with padding and display props | | Stack | Flex container with direction, gap, align and justify | | Grid | CSS grid container | | Container | Max-width centered container |

Inputs

| Component | Description | |---|---| | Button | Button with default, outline, ghost, destructive variants | | Input | Text input field | | Textarea | Multi-line text input | | Checkbox | Checkbox with label support | | Select | Dropdown select with option groups |

Display

| Component | Description | |---|---| | Badge | Small label with success, warning, destructive variants | | Alert | Contextual message with info, success, warning, destructive variants | | Avatar | User avatar with image and fallback initials | | Card | Content card with header, body and footer | | StatCard | Metric card with trend indicator | | Progress | Progress bar with size and variant options |

Navigation

| Component | Description | |---|---| | Breadcrumb | Breadcrumb trail with mobile collapse support | | Tabs | Tab navigation with mobile scroll support | | Sidebar | App sidebar with mobile drawer support |

Overlays

| Component | Description | |---|---| | Dialog | Modal dialog | | Toast / Toaster | Toast notifications with position and variant support |

Data

| Component | Description | |---|---| | Table | Static data table | | DataTable | Sortable data table powered by TanStack Table |

AI agent integration (MCP)

@practics/ui-mcp is an MCP server that lets Claude Code, Cursor, and other AI coding agents query accurate component metadata instead of hallucinating prop names.

// .mcp.json in your project root
{
  "mcpServers": {
    "practics-ui": {
      "command": "npx",
      "args": ["-y", "@practics/ui-mcp"]
    }
  }
}

Once configured, your agent can call tools like:

get_component("Button")        → full props, variants, examples
check_props("StatCard", {...}) → validates props before writing code
get_a11y_requirements("Input") → WCAG requirements + live axe results
search_components("modal")     → ranked component search
scaffold-form prompt           → generates react-hook-form + Zod form

Performance (50-iteration benchmark, InMemoryTransport):

| Tool | p50 | p95 | Cost/1k calls | |---|---|---|---| | get_component | 0.72ms | 1.10ms | $2.70 | | check_props | 0.52ms | 2.92ms | $0.27 | | search_components | 0.87ms | 3.84ms | $0.97 |

13/13 eval cases pass. Full details: mcp/README.md

Storybook

Browse all components and their props live: https://pravoobi.github.io/practics-ui

Peer Dependencies

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0"
}

License

ISC