a2v2-uikit

A React UI component library built with shadcn/ui and Tailwind CSS.

Installation

npm install a2v2-uikit

Setup

1. Import Styles

Add the styles to your app's entry point:

import "a2v2-uikit/styles.css"

2. Configure Tailwind CSS

Make sure you have Tailwind CSS v4+ configured in your project.

Usage

Components

import { Button, Input, Card, AlertDialog } from "a2v2-uikit"

function App() {
  return (
    <Card>
      <Input placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  )
}

Toast Notifications

import { Toaster, toast } from "a2v2-uikit"

function App() {
  return (
    <>
      <button onClick={() => toast.success("Saved!")}>Show Toast</button>
      <Toaster />
    </>
  )
}

Form Validation

import { Input, Label, ErrorMessage } from "a2v2-uikit"

function Form() {
  const errors = { email: "Please enter a valid email" }
  const touched = { email: true }

  return (
    <div>
      <Label htmlFor="email">Email</Label>
      <Input id="email" className={errors.email ? "border-error-500" : ""} />
      <ErrorMessage name="email" errors={errors} touched={touched} />
    </div>
  )
}

Icons

import { Home, Settings, User } from "a2v2-uikit/icons"

function Nav() {
  return (
    <nav>
      <Home size={24} />
      <Settings size={24} />
      <User size={24} />
    </nav>
  )
}

Helpers

import { cn, cva } from "a2v2-uikit/helpers"

const buttonVariants = cva("base-class", {
  variants: {
    size: {
      sm: "text-sm",
      lg: "text-lg",
    },
  },
})

function MyButton({ className, size }) {
  return <button className={cn(buttonVariants({ size }), className)} />
}

Available Components

Form Controls

| Component | Description | |-----------|-------------| | Button | Interactive buttons with variants | | IconButton | Icon-only buttons | | Input | Text input fields | | InputOTP | One-time password input | | Textarea | Multi-line text input | | Checkbox | Checkbox input | | RadioGroup | Radio button groups | | Select | Select dropdowns | | Switch | Toggle switches | | Label | Form labels | | ErrorMessage | Form validation errors |

Layout

| Component | Description | |-----------|-------------| | Flex | Flexbox layout component | | Card | Container for content | | Separator | Visual dividers | | ScrollArea | Custom scrollable areas |

Feedback

| Component | Description | |-----------|-------------| | Alert | Displays important messages | | Badge | Status indicators and labels | | Loader | Loading spinners | | Progress | Progress bars | | Skeleton | Loading placeholders | | Spinner | Animated loading spinner | | ChatBubble | Chat message bubbles | | Toast | Toast notifications |

Navigation & Overlay

| Component | Description | |-----------|-------------| | AlertDialog | Modal alert dialogs | | Breadcrumb | Navigation breadcrumbs | | Drawer | Slide-out panels | | DropdownMenu | Dropdown menus | | Popover | Floating content | | Tabs | Tabbed interfaces | | Tooltip | Hover tooltips |

Data Display

| Component | Description | |-----------|-------------| | Avatar | User profile images | | Calendar | Date picker | | Typography | Text styling component |

Exports

| Path | Description | |------|-------------| | a2v2-uikit | All components and utilities | | a2v2-uikit/icons | Lucide React icons | | a2v2-uikit/helpers | Utility functions (cn, cva, clsx, twMerge) | | a2v2-uikit/styles.css | Component styles |

Peer Dependencies

• React 18+ or 19+
• React DOM 18+ or 19+
• Tailwind CSS 4+

License

MIT