@coston/parallel-ui

Drop-in React and Vue shadcn components with a shared variant system. Write your component variants once and use them across both frameworks.

Installation

npm install @coston/parallel-ui

Peer Dependencies

@coston/parallel-ui externalizes all runtime dependencies so you only install what your project actually uses. Install the ones relevant to your framework and the components you use:

| Package | Why required | |---|---| | class-variance-authority | Powers the variant system used by every component (button sizes, alert styles, etc.) | | clsx + tailwind-merge | Used by every component to merge class names safely | | react + react-dom | Required for all React components | | vue | Required for all Vue components | | radix-ui | Headless primitives behind most React components (dialogs, dropdowns, etc.) | | react-hook-form | Required by the Form component | | cmdk | Required by the Command component | | input-otp | Required by the InputOTP component | | recharts | Required by the Chart component | | embla-carousel-react | Required by the React Carousel component | | embla-carousel-vue | Required by the Vue Carousel component | | vaul | Required by the React Drawer component | | vaul-vue | Required by the Vue Drawer component | | vee-validate | Required by the Vue Form component |

React minimal install:

npm install @coston/parallel-ui class-variance-authority clsx tailwind-merge react react-dom radix-ui

Vue minimal install:

npm install @coston/parallel-ui class-variance-authority clsx tailwind-merge vue

Usage

React

import { Button } from '@coston/parallel-ui/react'

export function App() {
  return <Button variant="default">Click me</Button>
}

Vue

<script setup>
import { Button } from '@coston/parallel-ui/vue'
</script>

<template>
  <Button variant="default">Click me</Button>
</template>

Individual components

// React - import only what you need
import { Button } from '@coston/parallel-ui/react/button'
import { Card, CardHeader, CardContent } from '@coston/parallel-ui/react/card'

// Vue - import only what you need
import { Button } from '@coston/parallel-ui/vue/button'
import { Card, CardHeader, CardContent } from '@coston/parallel-ui/vue/card'

Components

Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Checkbox, Collapsible, Command, Context Menu, Dialog, Drawer, Dropdown Menu, Form, Hover Card, Input, Input OTP, Label, Menubar, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Textarea, Toast, Toggle, Toggle Group, Tooltip

Requirements

• Node.js 18+
• Tailwind CSS v3 or v4 in your project

License

MIT