@sudobility/components

Comprehensive React component library providing 110+ reusable UI components built on Radix UI primitives, styled with Tailwind CSS and the @sudobility/design token system. Ships as ES module and UMD bundles with TypeScript declarations. Domain-specific components are organized into 48 sub-packages under packages/.

Installation

bun add @sudobility/components @sudobility/design

Peer dependencies: react, react-dom, @radix-ui/react-*, @heroicons/react, class-variance-authority, clsx, tailwind-merge, react-router-dom, react-i18next, i18next, web-vitals.

Usage

import { Button, Card, Input, Modal, DataTable, Tabs } from '@sudobility/components';
import { ThemeProvider, useTheme, Theme } from '@sudobility/components';
import { cn } from '@sudobility/components';

function App() {
  return (
    <ThemeProvider defaultTheme={Theme.SYSTEM}>
      <Card>
        <Input placeholder="Enter your name" />
        <Button variant="primary">Submit</Button>
      </Card>
    </ThemeProvider>
  );
}

API

Component Categories

• Primitives -- Layout (Box, Flex, Grid, Stack, Section), Typography (Text, Heading, Code), Feedback (Spinner, Alert, Badge, Toast, StatusIndicator)
• Forms -- Inputs (Input, Select, Checkbox, Switch, DateInput, TagInput, OTPInput), Advanced (DateRangePicker, ColorPicker, WYSIWYG, SignaturePad), Builders (FormBuilder, SurveyBuilder)
• Data Display -- DataTable, DataGrid, PivotTable, Avatar, StatDisplay, KeyValuePair, TreeView
• Charts -- BarChart, LineChart, PieChart, RadarChart, Heatmap, Gauge, Sparkline
• Media -- ImageGallery, VideoPlayer, AudioPlayer, QRCodeDisplay
• Modals -- Modal, Dialog, Drawer, Sheet, Popover, Tooltip
• Interactive -- DragDrop, SwipeActions, PinchZoom, ScrollSpy, InfiniteScroll
• Navigation -- SmartLink, Tabs, Pagination, Stepper, BreadcrumbNav
• Core -- ThemeProvider, ProtectedRoute, SafeAppWrapper, ErrorBoundary, PerformancePanel

Sub-Packages (48 domain-specific packages in packages/)

auth, email, web3, subscription, marketing, devops, finance, ecommerce, healthcare, and 39 more.

Development

bun install
bun run build              # TypeScript + Vite library build
bun run dev                # Watch mode
bun run type-check         # TypeScript checking
bun run lint               # ESLint
bun test                   # Vitest (80% coverage threshold)
bun run prepublishOnly     # Pre-publish build

Related Packages

• @sudobility/design -- design tokens, colors, typography, variants (peer dependency)
• @sudobility/types -- shared TypeScript types (peer dependency)
• @sudobility/components-rn -- React Native port of this library

License

Public (npm)