open-index/open-npm huggingface dataset:
npm package: @opstwo/ui
Description: Shared UI component library for Opstwo Multi-Tenant Sub-Apps Architecture.
Latest version: 0.0.3

# @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

```bash
npm install @opstwo/ui
# or
pnpm add @opstwo/ui
# or
yarn add @opstwo/ui
```

## Usage

### Import Components

```tsx
import { Button } from "@opstwo/ui/components/button";
import { Card } from "@opstwo/ui/components/card";
```

### Import Utilities

```tsx
import { cn } from "@opstwo/ui/lib/utils";
```

### Import Hooks

```tsx
import { useIsMobile } from "@opstwo/ui/hooks/use-mobile";
```

### Import Global CSS

Add this to your root layout or main CSS file:

```tsx
import "@opstwo/ui/styles/globals.css";
```

### Use Tailwind Config

```ts
// 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

```bash
# Install dependencies
pnpm install

# Build the package
pnpm exec tsup

# Run type checking
pnpm run check-types
```

## License

Proprietary - Opstwo