@opstwo/ui

Shared UI component library for Opstwo Multi-Tenant Sub-Apps Architecture.

Features

• Shadcn UI Components: Full set of accessible, customizable components
• Tailwind CSS v4: Modern styling with custom theme
• TypeScript: Full type safety
• Dark Mode: Built-in dark mode support
• Tree-shakeable: Import only what you need

Installation

npm install @opstwo/ui
# or
pnpm add @opstwo/ui
# or
yarn add @opstwo/ui

Usage

Import Components

import { Button } from "@opstwo/ui/components/button";
import { Card } from "@opstwo/ui/components/card";

Import Utilities

import { cn } from "@opstwo/ui/lib/utils";

Import Hooks

import { useIsMobile } from "@opstwo/ui/hooks/use-mobile";

Import Global CSS

Add this to your root layout or main CSS file:

import "@opstwo/ui/styles/globals.css";

Use Tailwind Config

// tailwind.config.ts
import baseConfig from "@opstwo/ui/tailwind.config";

export default {
  ...baseConfig,
  content: [
    ...baseConfig.content,
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
  ],
};

Components

This package includes the following components:

• Accordion
• Alert
• Alert Dialog
• Avatar
• Badge
• Breadcrumb
• Button
• Card
• Chart
• Checkbox
• Collapsible
• Command
• Dialog
• Dropdown Menu
• Form
• Input
• Label
• Navigation Menu
• Popover
• Progress
• Radio Group
• Scroll Area
• Select
• Separator
• Sheet
• Sidebar
• Skeleton
• Switch
• Table
• Tabs
• Textarea
• Tooltip

Development

# Install dependencies
pnpm install

# Build the package
pnpm exec tsup

# Run type checking
pnpm run check-types

License

Proprietary - Opstwo