@tcn/ui

A comprehensive React component library providing a complete set of UI components for building modern web applications.

Overview

@tcn/ui is the main UI component package in the Blackcat design system. It provides a unified API with organized sub-exports for different component categories.

This package is primarily composed of "atomic" components meant to be used as building blocks in applications and in more comprehensive components.

Usage

Import components from the main package or use sub-exports for better tree-shaking:

// Use sub-exports for better tree-shaking
import { Button } from '@tcn/ui/actions';
import { Input } from '@tcn/ui/inputs';
import { VStack } from '@tcn/ui/stacks';

Available Sub-exports

• @tcn/ui/actions - Buttons, button groups, and action elements
• @tcn/ui/inputs - Text inputs, selects, date pickers, checkboxes, switches, and more
• @tcn/ui/form - Form fields, field sets, and form components
• @tcn/ui/layouts - Grid, columns, lists, headers, footers, and page structure
• @tcn/ui/stacks - Horizontal, vertical, and z-stack components
• @tcn/ui/overlay - Modals, tooltips, popovers, menus, and portals
• @tcn/ui/feedback - Loading indicators and progress bars
• @tcn/ui/surfaces - Cards, panels, drawers, modals, and windows
• @tcn/ui/typography - Text components, headings, and typography utilities
• @tcn/ui/tokens - Badges, bubbles, and chips
• @tcn/ui/themes - Theme system and preconfigured themes
• @tcn/ui/utils - Utility functions, hooks, and helpers
• @tcn/ui/dnd - Drag and drop utilities

Scripts

• build: pnpm ws ui build - Build the package
• storybook: pnpm ws ui start - Start Storybook development server
• test: pnpm ws ui test - Run tests
• check:all: pnpm ws ui check:all - Run all checks (types, lint, format)

Development

Each component category is organized in its own directory under src/ with its own index file for clean sub-exports. The package uses Vite for building and Storybook for component documentation.