@solvprotocol/ui-v2

@solvprotocol/ui-v2

A modern React UI component library built on Radix UI and Tailwind CSS, providing rich accessibility and customizable components.

✨ Features

• 🎨 Modern Design - Based on shadcn/ui's New York style design system
• ♿ Accessibility First - Built with Radix UI primitives for optimal accessibility
• 🎯 TypeScript Support - Complete type definitions and intelligent suggestions
• 🎨 Tailwind CSS - Styled with Tailwind CSS v4
• 🔧 Highly Customizable - Support for CSS variables and theme switching
• 📱 Responsive Design - Support for mobile and desktop
• 🚀 Performance Optimized - Built with Vite, supporting Tree Shaking
• 📦 Modular Exports - Support for ES and CommonJS formats

🚀 Quick Start

Installation

npm i @solvprotocol/ui-v2
# or
yarn add @solvprotocol/ui-v2
# or
pnpm add @solvprotocol/ui-v2

Usage

import { Button, Card, Input } from '@solvprotocol/ui-v2';
import '@solvprotocol/ui-v2/dist/assets/style.css'

function App() {
  return (
    <div className="p-4">
      <Card className="w-80">
        <CardHeader>
          <CardTitle>Login</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <Input placeholder="Username" />
          <Input type="password" placeholder="Password" />
          <Button className="w-full">Login</Button>
        </CardContent>
      </Card>
    </div>
  );
}

📚 Component List

Layout Components

• Accordion - Accordion component
• AspectRatio - Aspect ratio component
• Card - Card component
• Collapsible - Collapsible component
• Drawer - Drawer component
• Resizable - Resizable component
• ScrollArea - Scroll area
• Separator - Separator
• Sheet - Sidebar component
• Sidebar - Sidebar

Form Components

• Button - Button component
• Checkbox - Checkbox
• Form - Form component
• Input - Input field
• InputOTP - OTP input field
• Label - Label
• RadioGroup - Radio button group
• Select - Selector
• Slider - Slider
• Switch - Switch
• Textarea - Text area
• Toggle - Toggle button
• ToggleGroup - Toggle button group

Navigation Components

• Breadcrumb - Breadcrumb navigation
• Command - Command palette
• ContextMenu - Context menu
• DropdownMenu - Dropdown menu
• HoverCard - Hover card
• Menubar - Menu bar
• NavigationMenu - Navigation menu
• Pagination - Pagination
• Popover - Popover
• Tabs - Tabs

Feedback Components

• Alert - Alert notification
• AlertDialog - Alert dialog
• Badge - Badge
• Dialog - Dialog
• Progress - Progress bar
• Skeleton - Skeleton screen
• Sonner - Notification component
• Tooltip - Tooltip

Data Display Components

• Avatar - Avatar
• Calendar - Calendar
• Carousel - Carousel
• Chart - Chart component
• Table - Table

🛠️ Development

Requirements

• Node.js 18+
• npm/yarn/pnpm

Install Dependencies

npm install
# or
yarn install
# or
pnpm install

Development Server

npm run dev
# or
yarn dev
# or
pnpm dev

Build

npm run build
# or
yarn build
# or
pnpm build

Code Linting

npm run lint
# or
yarn lint
# or
pnpm lint

🎨 Theme Customization

The component library supports CSS variables for theme customization:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* More variables... */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  /* More variables... */
}

📖 Tech Stack

• React 19 - User interface library
• TypeScript - Type-safe JavaScript
• Radix UI - Unstyled accessible component primitives
• Tailwind CSS - Utility-first CSS framework
• Vite - Fast frontend build tool
• shadcn/ui - Component design system

🤝 Contributing

Welcome to submit Issues and Pull Requests to improve this component library!

📄 License

MIT License

🔗 Related Links

• Radix UI
• Tailwind CSS
• shadcn/ui
• React