@pibit/components

Component library for Pibit B2B SaaS platform.

Phase 0 - Foundation (v0.1.0)

This is the initial release with core primitive components.

Installation

npm install @pibit/components

Peer Dependencies

You need to have these installed in your project:

npm install react react-dom tailwindcss

Setup

1. Add to Tailwind Config

Update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@pibit/components/**/*.{js,ts,jsx,tsx}', // Add this
  ],
  // ... rest of your config
};

2. Import Styles

In your main entry file (e.g., main.tsx or App.tsx):

import '@pibit/components/styles';

Components

Phase 0 Primitives

• Button - Accessible button with multiple variants
• Input - Text input with label, error states, and icons
• Checkbox - Accessible checkbox with label support
• Badge - Labels and status indicators
• Avatar - User profile images with fallbacks
• Icon - Icon component (abstracts Untitled UI)

Usage Examples

Button

import { Button } from '@pibit/components/primitives/button';

function App() {
  return (
    <>
      <Button>Click me</Button>
      <Button variant="secondary" size="lg">Large Secondary</Button>
      <Button variant="destructive">Delete</Button>
      <Button isDisabled>Disabled</Button>
    </>
  );
}

Input

import { Input } from '@pibit/components/primitives/input';
import { Icon } from '@pibit/components/primitives/icon';

function LoginForm() {
  return (
    <>
      <Input
        label="Email"
        type="email"
        placeholder="[email protected]"
        isRequired
      />
      <Input
        label="Search"
        type="search"
        placeholder="Search..."
        leftIcon={<Icon name="SearchMd" size={16} />}
      />
      <Input
        label="Password"
        type="password"
        errorMessage="Password is required"
      />
    </>
  );
}

Checkbox

import { Checkbox } from '@pibit/components/primitives/checkbox';

function TermsForm() {
  const [accepted, setAccepted] = useState(false);

  return (
    <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/components/primitives/badge';

function StatusIndicator({ status }) {
  return (
    <>
      <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/components/primitives/avatar';

function UserProfile({ user }) {
  return (
    <Avatar
      src={user.avatarUrl}
      alt={user.name}
      fallback={user.initials}
      size="lg"
    />
  );
}

Icon

import { Icon } from '@pibit/components/primitives/icon';

function IconExamples() {
  return (
    <>
      <Icon name="ChevronDown" size={16} />
      <Icon name="SearchMd" size={20} className="text-gray-500" />
      <Icon name="CheckCircle" size={24} className="text-success-600" />
    </>
  );
}

Import Strategies

✅ Recommended: Direct Imports (Tree-shakeable)

import { Button } from '@pibit/components/primitives/button';
import { Input } from '@pibit/components/primitives/input';

✅ Also Good: Barrel Import for Primitives

import { Button, Input, Badge } from '@pibit/components';

Development

Install Dependencies

npm install

Run Storybook

npm run storybook

Build Library

npm run build

Run Tests

npm test

Architecture

src/
├── primitives/     # Phase 0 - Basic UI components (Button, Input, etc.)
├── patterns/       # Phase 1 - Composable patterns (Select, Modal, etc.)
├── complex/        # Phase 2 - Heavy library abstractions (DataTable, etc.)
├── domain/         # Phase 3 - Business-aware components (FieldRenderer, etc.)
├── utils/          # Shared utilities
└── styles/         # Design tokens and global styles

Bundle Size

Phase 0 primitives are designed to be lightweight:

• Button: ~5KB
• Input: ~8KB
• Checkbox: ~6KB
• Badge: ~3KB
• Avatar: ~5KB
• Icon: ~2KB (+ Untitled UI icons as needed)

Total (all primitives): ~30KB (tree-shaken)

Browser Support

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

Accessibility

All components are built with accessibility in mind:

• ✅ WCAG 2.1 AA compliant
• ✅ Keyboard navigation
• ✅ Screen reader support
• ✅ Focus management
• ✅ Semantic HTML

License

MIT

Contributing

See CONTRIBUTING.md for development guidelines.

Roadmap

• v0.1.0 (Week 1) - Phase 0: Primitives ← YOU ARE HERE
• v0.2.0 (Week 2) - Phase 1: Patterns (Select, Modal, DatePicker)
• v0.3.0 (Week 3) - Phase 2: Complex (DataTable, RichTextEditor)
• v0.4.0 (Week 4) - Phase 3: Domain (FieldRenderer, PermissionGate)
• v1.0.0 (Week 4) - Stable release