Fusion UI Design System

A comprehensive, production-ready React component library built with Radix UI, Tailwind CSS, and TypeScript.

Features

• 🎨 46+ React Components - Accordion, Button, Dialog, Form, Navigation, and more
• 🎯 Accessible - Built on Radix UI primitives with full WCAG compliance
• 🎭 Customizable - Tailwind CSS based styling, easily themable
• 📦 Tree-shakeable - ES modules with proper exports
• 🔧 TypeScript - Full TypeScript support with proper type definitions
• 📖 Storybook - Interactive component documentation and playground
• ♿ ARIA Ready - Screen reader and keyboard navigation support

Installation

npm install @syscore/ui-library
# or
pnpm add @syscore/ui-library
# or
yarn add @syscore/ui-library

Prerequisites

Make sure your project has the required peer dependencies:

npm install react react-dom tailwindcss

Quick Start

1. Configure Tailwind CSS

Add the component library paths to your tailwind.config.ts:

import type { Config } from "tailwindcss";

export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "node_modules/@syscore/ui-library/**/*.{js,mjs}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

2. Import Components

import { Button, Card, Input } from "@syscore/ui-library";

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

Available Components

Layout & Structure

• Accordion - Collapsible content sections
• AspectRatio - Maintain aspect ratios for media
• Card - Container component with header, footer, content
• Separator - Visual divider between sections
• ScrollArea - Scrollable area with custom styling
• Table - Data table component
• Resizable - Resizable panel groups
• Sidebar - Navigation sidebar with menu items

Form & Input

• Button - Primary button component with variants
• Input - Text input field
• Textarea - Multi-line text input
• Label - Form label
• Checkbox - Checkbox input
• RadioGroup - Radio button group
• Switch - Toggle switch
• Slider - Range slider
• Select - Dropdown select
• InputOTP - One-time password input
• ToggleGroup - Toggle button group
• Toggle - Single toggle button
• Form - Form container with field validation

Display

• Badge - Small label/tag component
• Alert - Alert message with icon
• Avatar - User avatar with fallback
• Breadcrumb - Navigation breadcrumb
• Progress - Progress bar
• Skeleton - Content loading skeleton
• Calendar - Date picker calendar

Navigation

• Tabs - Tabbed content
• Pagination - Page navigation
• NavigationMenu - Horizontal navigation menu
• Menubar - Application menu bar
• DropdownMenu - Dropdown menu

Dialog & Overlay

• Dialog - Modal dialog
• Sheet - Slide-out sheet/drawer from side
• Drawer - Accessible drawer component
• AlertDialog - Alert dialog with confirmation
• Popover - Floating popover panel
• HoverCard - Card that appears on hover
• Tooltip - Tooltip on hover
• ContextMenu - Right-click context menu

Interactive

• Carousel - Image/content carousel
• Collapsible - Collapsible content
• Command - Command palette/search

Notifications

• Toast - Toast notification system
• Toaster - Toast container
• Sonner - Toast notifications alternative

Charts

• Chart - Data visualization components

Component Examples

Button

import { Button } from "@syscore/ui-library";

export default function ButtonExample() {
  return (
    <>
      <Button>Default</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="destructive">Destructive</Button>
      <Button disabled>Disabled</Button>
    </>
  );
}

Dialog

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  Button,
} from "@syscore/ui-library";

export default function DialogExample() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
        </DialogHeader>
        <p>Dialog content goes here.</p>
      </DialogContent>
    </Dialog>
  );
}

Form with Validation

import { useForm } from "react-hook-form";
import { Button, Input, Label, Form } from "@syscore/ui-library";

export default function FormExample() {
  const { register, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <div className="space-y-4">
        <div>
          <Label htmlFor="name">Name</Label>
          <Input id="name" {...register("name")} />
        </div>
        <Button type="submit">Submit</Button>
      </div>
    </form>
  );
}

Customization

Tailwind Configuration

All components use Tailwind CSS classes and can be customized through your tailwind.config.ts:

export default {
  theme: {
    extend: {
      colors: {
        primary: "#YOUR_COLOR",
        secondary: "#YOUR_COLOR",
      },
    },
  },
};

Component Props

Each component accepts standard HTML attributes and additional props for customization:

<Button variant="solid" size="lg" className="custom-class" disabled={false}>
  Click me
</Button>

Storybook

View interactive documentation and examples:

npm run storybook

This opens Storybook at http://localhost:6006 where you can browse all components and their variants.

TypeScript Support

Full TypeScript support with proper type definitions:

import type { ButtonHTMLAttributes } from "react";
import { Button, type ButtonProps } from "@syscore/ui-library";

interface MyButtonProps extends ButtonProps {
  label: string;
}

export default function MyButton({ label, ...props }: MyButtonProps) {
  return <Button {...props}>{label}</Button>;
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT License - see LICENSE file for details

Support

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions

Related

• Radix UI
• Tailwind CSS
• shadcn/ui

Made with ❤️ by Your Team