@obsy-official/ui

Unified UI design system and React component library for Obsy applications (obsy-frontend, obsy-launcher, obsy-launcher-frontend).

Installation

Install the package using your favorite package manager:

bun add @obsy-official/ui

(or via pnpm add @obsy-official/ui / npm install @obsy-official/ui)

Quick Start

1. Import Global Styles

Import the design system tokens and component styles in your main CSS or layout entrypoint:

@import "@obsy-official/ui/styles.css";

2. Use Components

import { Button, Card, Dialog, Input, toast } from "@obsy-official/ui";

export function App() {
  return (
    <Card className="p-6 space-y-4">
      <Input placeholder="Enter server name..." />
      <Button
        variant="launcher"
        onClick={() => toast.success("Server started successfully!")}
      >
        Launch Server
      </Button>
    </Card>
  );
}

Included Components (34)

• Buttons & Badges: Button, Badge, Kbd, KbdGroup, Toggle, ToggleGroup
• Inputs & Forms: Input, InputGroup, InputOTP, NumberInput, Textarea, Label, Checkbox, Switch, Select, Slider, Progress
• Dialogs & Overlays: Dialog, Sheet, Command (cmdk), DropdownMenu, ContextMenu, Popover, Tooltip
• Alerts & Toasts: Alert, Toaster / toast (sonner)
• Data & Layout: Card, Table, Avatar, Tabs, Accordion, Collapsible, Pagination, Skeleton, Separator
• Utilities: cn

License

Proprietary © Obsy Official. All rights reserved.