youtopia-ui

A React UI component library built with Radix UI and Tailwind CSS.

Installation

npm install youtopia-ui

Peer Dependencies

This library requires the following peer dependencies:

npm install react react-dom @radix-ui/react-accordion @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-tooltip @tanstack/react-table class-variance-authority clsx cmdk date-fns lucide-react react-day-picker react-phone-number-input tailwind-merge

Usage

Import Styles

Add the CSS import to your app's entry point:

import "youtopia-ui/styles.css";

Import Components

import { Button, Input, Card, DataTable, cn } from "youtopia-ui";

function App() {
  return (
    <Card>
      <Input placeholder="Enter text..." />
      <Button>Submit</Button>
    </Card>
  );
}

Components

UI Primitives

• Accordion - Collapsible content sections
• Badge - Status indicators and labels
• Button - Clickable action elements
• Calendar - Date picker calendar
• Card - Container with header, content, and footer
• Checkbox - Toggle selection input
• Command - Command palette / search interface
• Dialog - Modal dialogs
• DropdownMenu - Contextual action menus
• Input - Text input field
• Label - Form field labels
• Popover - Floating content panels
• ScrollArea - Custom scrollable containers
• Select - Dropdown selection input
• Separator - Visual divider
• Table - Data display tables
• Tabs - Tabbed navigation
• Textarea - Multi-line text input
• Tooltip - Hover information displays

Custom Components

• ActionModal - Confirmation/action dialogs
• BulletPoints - Formatted list display
• Combobox - Searchable select input
• ContentTabs - Content switching tabs
• DataTable - Full-featured data tables with sorting and pagination
• DatePicker - Date selection with calendar
• EmptyState - Placeholder for empty content
• ErrorMessage - Form error display
• FileBadge - File type indicators
• FileInput - File upload input
• FilterInput - Filterable search input
• ImageUpload - Image upload with preview
• InputNumber - Numeric input with formatting
• InputText - Enhanced text input
• LabelTooltip - Label with info tooltip
• MultiSelectInput - Multi-value selection
• PasswordInput - Password field with visibility toggle
• PhoneInput - International phone number input
• SearchInput - Search field with icon
• SelectField - Form-integrated select
• TextareaField - Form-integrated textarea

Icons

50+ custom icons for common UI actions and concepts.

Utilities

• cn() - Tailwind class name merge utility
• typography - Typography style constants

Hooks

• useBreakpoints - Responsive breakpoint detection
• useClickOutside - Click outside detection

License

MIT