@arobo/ui

A comprehensive React component library built with Radix UI primitives and styled with Tailwind CSS. Designed for building modern, accessible, and customizable user interfaces.

Installation

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

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom tailwindcss

Quick Start

Import and use components:

import { Button, Card, CardHeader, CardTitle, CardContent } from "@arobo/ui";

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  );
}

Available Components

UI Components

• Form Elements: Button, Input, Textarea, Select, Checkbox, Radio Group, Switch, Slider
• Data Display: Card, Table, Badge, Avatar, Typography, Chart
• Feedback: Alert, Dialog, Toast, Tooltip, Progress, Skeleton
• Navigation: Tabs, Breadcrumb, Pagination, Navigation Menu, Sidebar
• Overlay: Modal, Drawer, Sheet, Popover, Hover Card
• Layout: Accordion, Collapsible, Separator, Scroll Area, Resizable
• And more: Carousel, Calendar, Command Palette, Context Menu, etc.

Brand Components

• Box, Stack, Container, Heading, Text, Header

Utilities

• Hooks: Custom React hooks for common patterns
• Theme: Dark mode support with next-themes integration

Features

• 🎨 Tailwind CSS - Utility-first styling
• ♿ Accessible - Built on Radix UI primitives
• 🌗 Dark Mode - Built-in theme support
• 📦 Tree-shakeable - Import only what you need
• 🎯 TypeScript - Fully typed components
• 📱 Responsive - Mobile-first design
• 🎭 Customizable - Easy to theme and extend

Documentation

For detailed documentation, examples, and interactive demos, visit our Storybook.

Configuration

Tailwind CSS Setup

This library uses Tailwind CSS v4. Follow these steps to set it up:

1. Install Required Dependencies

npm install tailwindcss @tailwindcss/vite

2. Configure Vite

Add the Tailwind plugin to your vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

3. Import Styles

In your main CSS file (e.g., src/index.css), add:

@import "tailwindcss";
@import "@arobo/ui/styles.css";

@source "../node_modules/@arobo/ui";

The @source directive tells Tailwind v4 where to find the component source files for automatic class detection.

Tree-shaking

Modern bundlers (webpack 5+, vite, rollup) automatically tree-shake unused exports:

// Import only what you need - unused components will be automatically removed
import { Button, Card, Input } from "@arobo/ui";

License

MIT © Arobid Labs

Support

For issues and feature requests, please visit our GitHub repository.