A modern React UI component library built on Base UI and Tailwind CSS v4.
npm install orphos
# or
bun add orphosThis library requires the following peer dependencies:
npm install react tailwindcss@^4Recommended: For icons used in components, install @tabler/icons-react:
npm install @tabler/icons-reactImport Tailwind CSS and the theme in your main CSS file:
@import "tailwindcss";
@import "orphos/theme.css";
@source "../node_modules/orphos/dist";Base UI uses portals for components that render popups (Dialog, Popover, Select, etc.). To ensure portaled components always appear on top of the entire page, add the following style to your application layout:
// layout.tsx
<body>
<div className="root">
{children}
</div>
</body>/* styles.css */
.root {
isolation: isolate;
}This creates a separate stacking context for your application's .root element, ensuring popups appear above page contents without z-index conflicts.
Starting with iOS 26, Safari allows content beneath the UI chrome to be visible. For backdrops (used by Dialog, Sheet, etc.) to cover the entire visual viewport after scrolling, add:
/* styles.css */
body {
position: relative;
}import { Button } from "orphos/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "orphos/card";
import { Input } from "orphos/input";
import { Label } from "orphos/label";
function LoginCard() {
return (
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle>Login to your account</CardTitle>
<CardDescription>
Enter your email below to login to your account
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-6">
<div className="grid gap-1.5">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="m@example.com" />
</div>
<div className="grid gap-1.5">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" />
</div>
</div>
</CardContent>
<CardFooter className="flex-col gap-1.5">
<Button variant="primary" className="w-full">
Login
</Button>
</CardFooter>
</Card>
);
}| Component | Description |
|---|---|
| Avatar | User avatar with fallback support |
| Badge | Status indicators and labels |
| Button | Primary action component with variants |
| Card | Content container with header/footer |
| Checkbox | Checkbox input control |
| Context Menu | Right-click context menus |
| Cropper | Image cropping utility |
| Dialog | Modal dialogs |
| Dropdown Menu | Dropdown menus with triggers |
| Empty | Empty state placeholders |
| Field | Form field wrapper with labels |
| Input | Text input component |
| Input Group | Grouped input with addons |
| Kbd | Keyboard shortcut display |
| Label | Form labels |
| Popover | Floating popover panels |
| Radio Group | Radio button groups |
| Select | Select dropdown component |
| Separator | Visual divider |
| Sheet | Slide-out side panels |
| Sidebar | Navigation sidebar |
| Skeleton | Loading skeleton placeholders |
| Slider | Range slider input |
| Spinner | Loading spinner |
| Switch | Toggle switch component |
| Tabs | Tabbed navigation |
| Textarea | Multi-line text input |
| Toast | Toast notifications |
| Toggle | Toggle button |
| Tooltip | Hover tooltips |
| Typography | Text styling components |
# Install dependencies
bun install
# Start development mode
bun run dev
# Build the library
bun run build
# Lint and format
bun run checkMIT © 2025 Asterism.