orphos

v0.50.2

Published

6 days ago

A modern React UI component library built on Base UI and Tailwind CSS v4.

0High
0Medium
0Low

theasterism

Orphos

A modern React UI component library built on Base UI and Tailwind CSS v4.

Installation

npm install orphos
# or
bun add orphos

Peer Dependencies

npm install react tailwindcss@^4

Recommended: for the icon examples used in the docs, install @tabler/icons-react.

npm install @tabler/icons-react

Setup

Import Tailwind CSS and the theme in your main CSS file:

@import "tailwindcss";
@import "orphos/theme.css";
@source "../node_modules/orphos/dist";

Portal stacking context

Base UI uses portals for components that render popups (Dialog, Popover, Select, etc.). To ensure portaled components appear on top of the entire page, add:

// layout.tsx
<body>
  <div className="root">
    {children}
  </div>
</body>

/* styles.css */
.root {
  isolation: isolate;
}

iOS 26+ Safari support

Starting with iOS 26, Safari allows content beneath the UI chrome to be visible. For backdrops (Dialog, Sheet, etc.) to cover the entire visual viewport after scrolling, add:

/* styles.css */
body {
  position: relative;
}

Usage

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="[email protected]" />
          </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>
  );
}

Components

| 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 |

Local docs

The playground package contains the live component docs and examples.

bun install
bun run dev --filter=playground

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme