@pibit.ai/cure-design-system

A modern, accessible React component library for building B2B SaaS applications.

📚 View Storybook Documentation

Installation

npm install @pibit.ai/cure-design-system

Setup

Simply import the pre-built component styles in your app entry point:

// Import component styles (includes theme + all utilities)
import '@pibit.ai/cure-design-system/styles';

That's it! No Tailwind configuration needed. All component styles are pre-built and ready to use.

Alternative: Import theme only

If you're using your own Tailwind setup and want just the theme variables:

import '@pibit.ai/cure-design-system/styles/theme';

Components

Primitives

• Button – Multiple variants, sizes, and states
• Input – Text input with labels, validation, and icons
• Checkbox – Accessible checkbox with label and description
• Badge – Status indicators and labels
• Avatar – Profile images with fallback support
• Icon – Unified icon system
• Text – Typography component
• Heading – Semantic headings
• Toggle – Switch component

Patterns

• Table – Data table with sorting and pagination

Usage

Button

import { Button } from '@pibit.ai/cure-design-system/primitives/button';

<Button variant="primary">Submit</Button>
<Button variant="secondary" size="lg">Cancel</Button>
<Button variant="destructive">Delete</Button>

Input

import { Input } from '@pibit.ai/cure-design-system/primitives/input';
import { Icon } from '@pibit.ai/cure-design-system/primitives/icon';

<Input
  label="Email"
  type="email"
  placeholder="[email protected]"
  isRequired
/>

<Input
  label="Search"
  leftIcon={<Icon name="SearchMd" size={16} />}
  placeholder="Search..."
/>

<Input
  label="Password"
  type="password"
  errorMessage="Password is required"
/>

Checkbox

import { Checkbox } from '@pibit.ai/cure-design-system/primitives/checkbox';

<Checkbox
  label="I accept the terms and conditions"
  description="You must accept to continue"
  checked={accepted}
  onCheckedChange={(checked) => setAccepted(!!checked)}
/>

Badge

import { Badge } from '@pibit.ai/cure-design-system/primitives/badge';

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="outline">Draft</Badge>

Avatar

import { Avatar } from '@pibit.ai/cure-design-system/primitives/avatar';

<Avatar
  src={user.avatarUrl}
  alt={user.name}
  fallback={user.initials}
  size="lg"
/>

Icon

import { Icon } from '@pibit.ai/cure-design-system/primitives/icon';

<Icon name="ChevronDown" size={16} />
<Icon name="SearchMd" size={20} className="text-gray-500" />
<Icon name="CheckCircle" size={24} className="text-success-600" />

Imports

Direct imports (recommended)

import { Button } from '@pibit.ai/cure-design-system/primitives/button';
import { Input } from '@pibit.ai/cure-design-system/primitives/input';

Barrel import

import { Button, Input, Badge } from '@pibit.ai/cure-design-system';

Accessibility

All components are built with accessibility as a priority:

• WCAG 2.1 AA compliant
• Full keyboard navigation
• Screen reader support
• Proper focus management
• Semantic HTML

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

License

MIT