@particlesui/ui

Internal UI component library for Particles UI Studio — built on Base UI with Tailwind CSS v4.

This package is an internal dependency used by Particles UI Studio. It is not intended as a general-purpose component library.

Installation

npm install @particlesui/ui

Requires Tailwind CSS v4:

npm install tailwindcss @tailwindcss/postcss

Usage

import { Button, Input, Dialog, Badge } from '@particlesui/ui'

Import the stylesheet in your root layout:

import '@particlesui/ui/dist/index.css'

Components

| Component | Description | |---|---| | Button | Polymorphic button with variant and size props | | Input | Text input with label and error state support | | Badge | Status and label badges | | Card | Container with header, content, and footer slots | | Dialog | Modal dialog built on Base UI | | DropdownMenu* | Base UI compound set (DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, …) | | Select | Native-feeling select built on Base UI | | Tabs | Tab navigation | | Sheet | Side-drawer panel | | Popover | Floating popover | | Toast | Notification toasts | | Checkbox | Checkbox with indeterminate state | | Switch | Toggle switch | | Slider | Range slider | | Progress | Progress bar | | Avatar | User avatar with fallback | | Accordion | Collapsible content panels | | Table | Data table | | Tooltip | Hover tooltip | | Skeleton | Loading placeholder | | Separator | Horizontal or vertical divider | | Alert | Inline alert message |

Utilities

import { cn } from '@particlesui/ui'

// cn() = clsx + tailwind-merge
cn('px-4 py-2', condition && 'bg-blue-500', 'bg-red-500')
// → 'px-4 py-2 bg-red-500'

License

MIT