Another composable React component library built on Base UI and Tailwind CSS v4.
Note: This is an experimental personal project. APIs may change without notice.
pnpm add @radenadri/void-ui- React 18+
- Tailwind CSS 4+
/* app.css */
@import "tailwindcss";
@import "@radenadri/void-ui/styles.css";
@source "../node_modules/@radenadri/void-ui/dist";Void UI uses light theme by default. To enable dark mode:
<html class="dark">
<!-- or -->
<html data-theme="dark">import { Button, Card, CardHeader, CardTitle, CardContent } from '@radenadri/void-ui'
function App() {
return (
<Card>
<CardHeader>
<CardTitle>Welcome to Void UI</CardTitle>
</CardHeader>
<CardContent>
<Button>Get Started</Button>
</CardContent>
</Card>
)
}- Stack - Flexbox layout with spacing
- Separator - Horizontal/vertical divider
- Button - Multiple variants and sizes
- Input - Text input
- Textarea - Multi-line input
- Checkbox - Checkbox with group support
- Switch - Toggle with label/description
- Radio - Radio group
- Select - Composable dropdown (SelectTrigger, SelectContent, SelectItem)
- Slider - Range slider with value display
- Field - Form field wrapper (FieldRoot, FieldLabel, FieldDescription, FieldError)
- Fieldset - Group of fields
- NumberField - Numeric input with increment/decrement
- Alert - Contextual feedback
- Avatar - User avatar with fallback
- Badge - Status indicators
- Card - Content container
- Spinner - Loading indicator
- Table - Data table (TableContainer, TableHeader, TableBody, etc.)
- Text - Typography
- Heading - Semantic headings
- Kbd - Keyboard shortcuts
- Tabs - Tab panels (Tabs, TabsList, TabsTrigger, TabsContent)
- Accordion - Collapsible sections
- Pagination - Page navigation
- Menu - Dropdown menu
- Dropdown - Enhanced dropdown with checkbox items
- Dialog - Modal dialog
- AlertDialog - Confirmation dialog
- Popover - Floating content
- Tooltip - Hover hints
- Toast - Notifications
- Collapsible - Expandable panel
- Progress - Progress bar with variants
Void UI re-exports Phosphor Icons:
import { Bell, Gear, User } from '@radenadri/void-ui'MIT