Production-ready React UI components built with Radix UI primitives and Tailwind CSS. Battle-tested in real-world applications.
npm install @bitbybit-b3/elements-react
# or
pnpm add @bitbybit-b3/elements-react
# or
yarn add @bitbybit-b3/elements-react
This package requires the following peer dependencies:
npm install react react-dom tailwindcss
Add to your tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@bitbybit-b3/elements-react/dist/**/*.{js,mjs}',
],
theme: {
extend: {},
},
plugins: [],
}
Add to your global CSS file:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
}
import { Button, Card, CardHeader, CardTitle, CardContent } from '@bitbybit-b3/elements-react';
export default function App() {
return (
<Card className="w-96">
<CardHeader>
<CardTitle>Welcome</CardTitle>
</CardHeader>
<CardContent>
<Button>Get Started</Button>
</CardContent>
</Card>
);
}
import { Button } from '@bitbybit-b3/elements-react';
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
import { Form, FormField, FormItem, FormLabel, FormControl, Input, Button } from '@bitbybit-b3/elements-react';
import { useForm } from 'react-hook-form';
function MyForm() {
const form = useForm();
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="Enter username" {...field} />
</FormControl>
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
);
}
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, Button } from '@bitbybit-b3/elements-react';
<Dialog>
<DialogTrigger asChild>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirm Action</DialogTitle>
<DialogDescription>
Are you sure you want to proceed?
</DialogDescription>
</DialogHeader>
<Button>Confirm</Button>
</DialogContent>
</Dialog>
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@bitbybit-b3/elements-react';
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>John Doe</TableCell>
<TableCell>john@example.com</TableCell>
</TableRow>
</TableBody>
</Table>
Detect mobile devices:
import { useIsMobile } from '@bitbybit-b3/elements-react';
function MyComponent() {
const isMobile = useIsMobile();
return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
}
Show toast notifications:
import { useToast } from '@bitbybit-b3/elements-react';
function MyComponent() {
const { toast } = useToast();
return (
<button onClick={() => toast({ title: 'Success!', description: 'Action completed' })}>
Show Toast
</button>
);
}
Merge Tailwind classes:
import { cn } from '@bitbybit-b3/elements-react';
<div className={cn('bg-red-500', isActive && 'bg-blue-500')} />
Works perfectly with Next.js 13+ (App Router and Pages Router):
'use client'; // Only needed for interactive components
import { Button } from '@bitbybit-b3/elements-react';
export default function Page() {
return <Button>Click me</Button>;
}
Configure Tailwind as shown above and import components normally.
Add PostCSS config and Tailwind setup, then use components.
All components are fully typed via JSDoc. Your IDE will provide full autocomplete and type checking:
import { Button, type ButtonProps } from '@bitbybit-b3/elements-react';
const MyButton: React.FC<ButtonProps> = (props) => {
return <Button {...props} />;
};
<Button className="bg-purple-500 hover:bg-purple-600">
Custom Styled Button
</Button>
import styles from './my-component.module.css';
import { Button } from '@bitbybit-b3/elements-react';
<Button className={styles.myButton}>Styled Button</Button>
Components support dark mode via CSS variables. Update your theme:
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
/* ... other dark mode variables */
}
Only import what you need - unused components are automatically removed:
// Good - Only Button and Card are included in bundle
import { Button, Card } from '@bitbybit-b3/elements-react';
// Avoid - Imports everything (though still tree-shakeable)
import * as Elements from '@bitbybit-b3/elements-react';
Found a bug or want to contribute? Visit our GitHub repository.
Apache 2.0 License - see LICENSE for details.
Made by the BitByBit-B3 team. Components from our real-world projects, shared with the community.