@ad/ui

A React + TypeScript component scaffolding CLI similar to shadcn/ui. This tool allows you to quickly generate component templates for your React projects.

Installation

npm install -g @test-ad-ui

Or use it directly with npx:

npx @test-ad-ui <command>

Usage

Generate Components

To add a component to your project:

npx @test-ad-ui add <component>

For example:

npx @test-ad-ui add button

This will copy the Button component template to your project's /components/button/ directory.

Generate Multiple Components

You can generate multiple components at once:

npx @test-ad-ui add button card modal

Available Components

The following component templates are available:

• accordion - A collapsible content component with single or multiple expansion support
• avatar - A user avatar component with size variants, status indicators, and group support
• badge - A badge component with multiple variants, sizes, and removable option
• button - A versatile button component with various styles and states
• card - A card component with header, content, and footer sections
• chart - A chart component for data visualization
• checkbox - A checkbox component with label and description
• circular-progress - A circular progress indicator with customizable size and color
• dropdown - A dropdown menu component with positioning options
• form - A form component with layout options and field grouping
• input - An input component with various states and icon support
• loader - A loading indicator with multiple variants
• modal - A modal dialog component with animations
• progress-bar - A linear progress bar with customizable variants and states
• select - A select component with options and states
• stats-card - A statistics card with title, value, description, and change indicator
• switch - A toggle switch component with label and description support
• table - A responsive table component with header, body, and footer sections
• tabs - A tabbed interface with multiple style variants and content panels
• textarea - A textarea component with various states
• timeline - A vertical timeline component with customizable items and status indicators
• toast - A toast notification component with variants
• tooltip - A tooltip component with multiple positioning options and triggers

If you request a component that doesn't have a specific template, a default component template will be used.

Component Examples

Here are basic usage examples for some of the available components:

Accordion

import { Accordion } from '@/components/accordion';

export default function AccordionExample() {
  return (
    <Accordion>
      <Accordion.Item title="Section 1" defaultOpen>
        <p>Content for section 1</p>
      </Accordion.Item>
      <Accordion.Item title="Section 2">
        <p>Content for section 2</p>
      </Accordion.Item>
    </Accordion>
  );
}

Avatar

import { Avatar } from '@/components/avatar';

export default function AvatarExample() {
  return (
    <div className="flex gap-4">
      <Avatar src="/images/avatar1.jpg" alt="User" size="sm" />
      <Avatar src="/images/avatar2.jpg" alt="User" size="md" status="online" />
      <Avatar.Group max={3}>
        <Avatar src="/images/avatar1.jpg" alt="User 1" />
        <Avatar src="/images/avatar2.jpg" alt="User 2" />
        <Avatar src="/images/avatar3.jpg" alt="User 3" />
        <Avatar src="/images/avatar4.jpg" alt="User 4" />
      </Avatar.Group>
    </div>
  );
}

Badge

import { Badge } from '@/components/badge';

export default function BadgeExample() {
  return (
    <div className="flex gap-2">
      <Badge>Default</Badge>
      <Badge variant="primary">Primary</Badge>
      <Badge variant="success" size="lg">Success</Badge>
      <Badge variant="error" rounded removable onRemove={() => console.log('removed')}>
        Removable
      </Badge>
    </div>
  );
}

Circular Progress

import { CircularProgress } from '@/components/circular-progress';

export default function CircularProgressExample() {
  return (
    <div className="flex gap-4">
      <CircularProgress value={25} />
      <CircularProgress value={50} size="md" variant="primary" showValue />
      <CircularProgress value={75} size="lg" variant="success" thickness={4} />
      <CircularProgress indeterminate size="sm" variant="secondary" />
    </div>
  );
}

Progress Bar

import { ProgressBar } from '@/components/progress-bar';

export default function ProgressBarExample() {
  return (
    <div className="space-y-4">
      <ProgressBar value={30} />
      <ProgressBar value={60} variant="primary" showValue />
      <ProgressBar value={90} variant="success" size="lg" />
      <ProgressBar indeterminate variant="secondary" />
    </div>
  );
}

Stats Card

import { StatsCard } from '@/components/stats-card';
import { TrendingUp, Users } from 'lucide-react';

export default function StatsCardExample() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <StatsCard 
        title="Total Users" 
        value="1,234" 
        description="Active accounts" 
        icon={<Users />} 
        change={12} 
      />
      <StatsCard 
        title="Revenue" 
        value="$12,345" 
        description="Monthly revenue" 
        icon={<TrendingUp />} 
        change={-5} 
        variant="error" 
      />
    </div>
  );
}

Switch

import { Switch } from '@/components/switch';
import { useState } from 'react';

export default function SwitchExample() {
  const [enabled, setEnabled] = useState(false);
  
  return (
    <div className="space-y-4">
      <Switch 
        checked={enabled} 
        onCheckedChange={setEnabled} 
        label="Notifications" 
        description="Receive email notifications" 
      />
      <Switch size="lg" variant="primary" label="Dark Mode" />
    </div>
  );
}

Tabs

import { Tabs } from '@/components/tabs';
import { Home, Settings, User } from 'lucide-react';

export default function TabsExample() {
  return (
    <Tabs
      tabs={[
        {
          label: 'Home',
          icon: <Home className="w-4 h-4" />,
          content: <div>Home content</div>
        },
        {
          label: 'Profile',
          icon: <User className="w-4 h-4" />,
          content: <div>Profile content</div>
        },
        {
          label: 'Settings',
          icon: <Settings className="w-4 h-4" />,
          content: <div>Settings content</div>
        }
      ]}
      variant="pills"
      defaultActiveTab={0}
    />
  );
}

Timeline

import { Timeline } from '@/components/timeline';

export default function TimelineExample() {
  return (
    <Timeline>
      <Timeline.Item 
        title="Project Created" 
        time="2 hours ago" 
        description="John created the project" 
        status="success" 
      />
      <Timeline.Item 
        title="Task Assigned" 
        time="1 hour ago" 
        description="Task assigned to Jane" 
        status="info" 
      />
      <Timeline.Item 
        title="In Progress" 
        time="30 minutes ago" 
        description="Jane started working on the task" 
        status="warning" 
      />
    </Timeline>
  );
}

Tooltip

import { Tooltip } from '@/components/tooltip';
import { Info } from 'lucide-react';

export default function TooltipExample() {
  return (
    <div className="flex items-center gap-4">
      <Tooltip content="This is a helpful tip">
        <button className="px-4 py-2 bg-blue-500 text-white rounded">
          Hover me
        </button>
      </Tooltip>
      
      <Tooltip 
        content="More information" 
        position="right" 
        showOnClick 
      >
        <Info className="w-5 h-5 text-blue-500" />
      </Tooltip>
    </div>
  );
}

Features

• Generates React + TypeScript components
• Uses TailwindCSS for styling
• Creates component folders automatically
• Skips existing files to prevent overwriting
• Supports generating multiple components at once

Requirements

• Node.js 14.0.0 or later
• A React + TypeScript project
• TailwindCSS installed in your project

License

MIT