Installation

npm install @uiblox/ui

Quick Start

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

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to uiblox</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}

Tailwind CSS Setup

Add the uiblox package to your Tailwind content configuration:

// tailwind.config.js
module.exports = {
  content: [
    // ... your other content paths
    "./node_modules/@uiblox/ui/dist/**/*.js",
  ],
  // ... rest of config
};

Available Components

| Component | Description | |-----------|-------------| | Alert | Alert messages with variants | | Avatar | User avatar with fallback | | Badge | Status indicator badge | | Button | Customizable button with variants | | Card | Card with header, content, footer | | Checkbox | Checkbox with label | | Dropdown | Dropdown menu | | Input | Styled input field | | Modal | Modal dialog | | Select | Dropdown select | | Separator | Visual separator | | Skeleton | Loading placeholder | | Switch | Toggle switch | | Tabs | Tabbed content | | Textarea | Multi-line text input | | Tooltip | Hover tooltip |

Using Individual Components vs CLI

This package (@uiblox/ui) - Install all components as a dependency:

npm install @uiblox/ui

• Best for: Quick setup, using many components
• Components update when you update the package

The CLI (@uiblox/cli) - Copy individual components into your project:

npx @uiblox/cli add button card

• Best for: Full customization, only using a few components
• Components are yours to modify

Requirements

• React 18+
• Tailwind CSS 3+

Links

• Website
• Documentation
• CLI Package

License

MIT