Bee UI Components

A modern, accessible React component library built with TypeScript. No Tailwind CSS required - all styles are included!

Features

• 🎨 No Tailwind Required - All styles are self-contained
• 📱 Fully Responsive - Works on all screen sizes
• ♿ Accessible - Built with accessibility in mind
• 🎯 TypeScript - Full type safety
• 🚀 Tree Shakeable - Import only what you need
• 🌙 Dark Mode - Automatic dark mode support
• 📦 Zero Dependencies - No external CSS framework required

Installation

npm install @bee-ui/core
# or
yarn add @bee-ui/core
# or
pnpm add @bee-ui/core

Quick Start

1. Import the CSS (required):

import '@bee-ui/core/styles.css';

2. Import and use components:

import { Button, Input, Card } from '@bee-ui/core';

function App() {
  return (
    <div>
      <Button variant="primary" size="md">
        Click me
      </Button>
      
      <Input placeholder="Enter text..." />
      
      <Card>
        <h2>Card Title</h2>
        <p>Card content goes here.</p>
      </Card>
    </div>
  );
}

Available Components

Basic Components

• Button - Various styles and sizes
• Input - Text input with validation
• Textarea - Multi-line text input
• Select - Dropdown selection
• Checkbox - Single and group checkboxes
• Radio - Radio button groups
• Switch - Toggle switches
• Slider - Range and value sliders

Layout Components

• Card - Content containers
• Table - Data tables with sorting/filtering
• Pagination - Page navigation
• Breadcrumbs - Navigation breadcrumbs
• Accordion - Collapsible content
• Timeline - Event timelines
• Drawer - Side panels

Feedback Components

• ProgressBar - Progress indicators
• Skeleton - Loading placeholders
• Toaster - Toast notifications
• Image - Enhanced image component

Advanced Components

• FileInput - File upload with drag & drop
• JSONInput - JSON editor with syntax highlighting
• ColorPicker - Color selection
• TransferList - Item transfer between lists
• SegmentedControl - Segmented button groups
• TableOfContents - Auto-generated TOC

Component Examples

Button

import { Button } from '@bee-ui/core';

// Different variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

// Different sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

// With icons and loading
<Button leftIcon={<Icon />} loading>
  Loading...
</Button>

Input

import { Input } from '@bee-ui/core';

<Input 
  placeholder="Enter your name"
  label="Full Name"
  description="This will be displayed on your profile"
  error="Name is required"
  required
/>

Card

import { Card } from '@bee-ui/core';

<Card 
  variant="elevated" 
  size="lg"
  title="Card Title"
  description="Card description"
  actions={[
    { label: 'Save', onClick: () => {} },
    { label: 'Cancel', variant: 'outline', onClick: () => {} }
  ]}
>
  Card content goes here
</Card>

Table

import { Table } from '@bee-ui/core';

const data = [
  { id: 1, name: 'John', email: 'john@example.com' },
  { id: 2, name: 'Jane', email: 'jane@example.com' }
];

const columns = [
  { accessor: 'name', title: 'Name' },
  { accessor: 'email', title: 'Email' }
];

<Table 
  data={data} 
  columns={columns}
  pagination={{ page: 1, pageSize: 10, total: 100 }}
/>

Styling

CSS Variables

The library uses CSS custom properties that you can override:

:root {
  --bee-primary: #6366f1;
  --bee-primary-foreground: #ffffff;
  --bee-secondary: #f3f4f6;
  --bee-border: #e5e7eb;
  --bee-radius: 0.5rem;
  /* ... and many more */
}

Dark Mode

Dark mode is automatically applied based on the user's system preference. You can also force it:

.dark {
  --bee-background: #0f172a;
  --bee-foreground: #f8fafc;
  /* ... dark mode variables */
}

Custom Styling

You can customize components using the className prop:

<Button className="my-custom-class">
  Custom Button
</Button>

TypeScript Support

All components are fully typed with TypeScript:

import { Button, ButtonProps } from '@bee-ui/core';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see LICENSE for details.

Support

• 📖 Documentation
• 🐛 Issues
• 💬 Discussions