UX Magic UI Component Library

A React + Tailwind component library built for the UXMagic design system, providing a comprehensive suite of accessible, customizable UI components.

• Pre-built UI elements based on Shadcn UI
• 🚀 React 18
• 📘 TypeScript for type safety
• 🎨 Tailwind CSS for styling

Installation

Install the package using npm:

npm install @uxmagic.ai/ui

Setup

Adding Styles

You need to import the component styles in your root layout file or global CSS. Choose one of the following methods:

Option 1: Direct Import in Root Layout

In your root layout file (e.g., layout.tsx or app.tsx):

import "@uxmagic.ai/ui/styles";

Option 2: Global CSS Import

In your global.css file:

@import url("@uxmagic.ai/ui/styles");

Usage

Import components from the library and use them in your React application:

import * as React from 'react';
import { Button } from "@uxmagic.ai/ui/components";

function MyComponent() {
  return (
    <Button>
      Hello World
    </Button>
  );
}

Dependencies

Peer Dependencies

The library requires the following peer dependencies:

{
  "@types/react": "*",
  "@types/react-dom": "*",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "tailwindcss": "*",
  "class-variance-authority": "^0.7.0",
  "clsx": "^2.1.0",
  "tailwind-merge": "^2.2.0"
}

TypeScript Support

All components include full type definitions. Import types directly from the package:

import type { ButtonProps } from "@uxmagic.ai/ui";

Available Components

Form Controls

• Input - Text input field for collecting user data
• Textarea - Multi-line text input for longer form responses
• Checkbox - Selection control for multiple choices
• RadioGroup - Selection control for single choice from multiple options
• Select - Dropdown selection component
• Switch - Toggle switch for boolean values
• Label - Form label component for accessibility
• Slider - Range input component

Navigation

• Breadcrumb - Navigation aid showing current location hierarchy
• Pagination - Component for handling multi-page data
• Tabs - Tabbed interface for organizing content
• DropdownMenu - Menu component for nested options

Overlay & Modals

• Dialog - Modal dialog component for important actions
• Sheet - Slide-out panel component
• Tooltip - Informative popup on hover
• Carousel - Slideshow component for cycling through elements

Layout & Structure

• Accordion - Collapsible content panels
• Placeholder - Loading state placeholder component

Component Usage Examples

Form Controls

1. Input

import { Input } from "@uxmagic.ai/ui/components";

<Input type="text" placeholder="Enter text" />

2. Textarea

import { Textarea } from "@uxmagic.ai/ui/components";

// Basic Textarea
<Textarea 
  placeholder="Type your message here"
/>

3. Checkbox

import { Checkbox } from "@uxmagic.ai/ui/components";

<Checkbox 
  id="terms" 
  checked={true || false} 
  onCheckedChange={() => {}}
/>

4. RadioGroup

import { RadioGroup } from "@uxmagic.ai/ui/components";

<RadioGroup defaultValue="option1">
  <RadioGroupItem value="option1" id="option1">
    Option 1
  </RadioGroupItem>
  <RadioGroupItem value="option2" id="option2">
    Option 2
  </RadioGroupItem>
  <RadioGroupItem value="option3" id="option3">
    Option 3
  </RadioGroupItem>
</RadioGroup>

5. Select

import { Select } from "@uxmagic.ai/ui/components";

<Select defaultValue="option1">
  <SelectTrigger className="w-[350px]">
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

6. Switch

import { Switch } from "@uxmagic.ai/ui/components";

<Switch
  className="data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-red-500"
/>

7. Label

import { Label } from "@uxmagic.ai/ui/components";

// Basic
<Label htmlFor="terms" className="cursor-pointer">


<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms" className="cursor-pointer">
    I accept the{" "}
    <a
      className="text-link-primary underline ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-primary focus-visible:ring-offset-2"
      href="https://www.uxmagic.io"
      target="_blank"
      rel="noopener noreferrer"
    >
      Terms
    </a>
  </Label>
</div>

8. Slider

import { Slider } from "@uxmagic.ai/ui/components";

// Basic Slider
<Slider
  defaultValue={[50]}
  min={1}
  max={100}
  step={1}
/>

Navigation Components

9. Breadcrumb

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from "@uxmagic.ai/ui/components";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
      <BreadcrumbSeparator />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="/section">Section</BreadcrumbLink>
      <BreadcrumbSeparator />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

10. Pagination

import { Pagination, PaginationContent, PaginationPrevious, PaginationItem, PaginationLink, PaginationNext } from "@uxmagic.ai/ui/components";

<Pagination>
  <PaginationContent>
    <PaginationPrevious />
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">2</PaginationLink>
    </PaginationItem>
    <PaginationEllipsis />
    <PaginationItem>
      <PaginationLink href="#">4</PaginationLink>
    </PaginationItem>
    <PaginationNext />
  </PaginationContent>
</Pagination>

11. Tabs

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@uxmagic.ai/ui/components";

<Tabs defaultValue="tab1" className="flex flex-col gap-2">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content for Tab 1</TabsContent>
  <TabsContent value="tab2">Content for Tab 2</TabsContent>
  <TabsContent value="tab3">Content for Tab 3</TabsContent>
</Tabs>

12. DropdownMenu

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "@uxmagic.ai/ui/components";

// Basic Dropdown
<DropdownMenu>
  <DropdownMenuTrigger>
    Open Menu
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item 1</DropdownMenuItem>
    <DropdownMenuItem>Item 2</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Item 3</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Overlay & Modals

13. Dialog

import { Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@uxmagic.ai/ui/components";

// Basic Dialog
<Dialog>
  <DialogTrigger asChild>
    <Button variant="secondary">Delete Account</Button>
  </DialogTrigger>
  <DialogPortal>
    <DialogOverlay className="bg-black/25" />
    <DialogContent className="w-full max-w-md bg-white px-10 py-14 md:py-16 md:px-12">
      <DialogHeader>
        <DialogTitle className="mb-2">Delete Account</DialogTitle>
        <DialogDescription>Are you sure you want to delete your account? This action cannot be undone.</DialogDescription>
      </DialogHeader>
      <div className="mt-6 flex w-full flex-col gap-4 md:mt-8">
        <Button variant="secondary">Delete Account</Button>
        <Button variant="secondary">Cancel</Button>
      </div>
    </DialogContent>
  </DialogPortal>
</Dialog>

14. Sheet

import { Sheet, SheetTrigger, SheetPortal, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@uxmagic.ai/ui/components";
<Sheet>
  <SheetTrigger>
    <Button className="btn">Open Sheet</Button>
  </SheetTrigger>
  <SheetPortal>
    <SheetContent {...args} >
      <SheetClose />
      <SheetHeader>
        <SheetTitle>Medium heading goes here</SheetTitle>
        <>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius lacinia posuere. Morbi
          condimentum orci ut venenatis ornare.
        </SheetDescription>
      </SheetHeader>
    </SheetContent>
  </SheetPortal>
</Sheet>

15. Tooltip

import { Tooltip, TooltipTrigger, TooltipContent } from "@uxmagic.ai/ui/components";

<div className="w-full h-screen flex justify-center items-center">
    <Tooltip>
    <TooltipTrigger>Card Content</TooltipTrigger>
    <TooltipContent className="max-w-[240px] p-3" side="right">
        <div className="space-y-2">
        <img src="/placeholder-images/carousel/image.png" />
        <h4 className="font-medium">Rich Tooltip</h4>
        <p className="text-xs text-muted-foreground">
            Tooltips can contain rich content including headings, 
            paragraphs, and other elements.
        </p>
        </div>
    </TooltipContent>
    </Tooltip>
</div>

16. Carousel

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@uxmagic.ai/ui/components";

<Carousel>
  <CarouselContent>
    {Array.from({ length: 5 }).map((_, index) => (
      <CarouselItem key={index}>
        <div className="p-1">
          <div className="relative aspect-[16/9] overflow-hidden rounded-lg">
            <img
              src="/carousel/image.png"
              alt={`Slide ${index + 1}`}
              className="h-full w-full object-cover"
            />
          </div>
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Layout & Structure

17. Accordion

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@uxmagic.ai/ui/components";

// Basic Accordion
<Accordion type="single" defaultValue="item-1" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Default Accordion Example</AccordionTrigger>
    <AccordionContent>
      This is the default accordion style with the standard chevron icon and
      border styling.
    </AccordionContent>
  </AccordionItem>
</Accordion>

18. Placeholder

import { Placeholder } from "@uxmagic.ai/ui/components";

<div className="grid grid-cols-3 gap-4">
  <Placeholder rounded="none" border="default" />
  <Placeholder rounded="sm" border="default" />
  <Placeholder rounded="md" border="default" />
  <Placeholder rounded="lg" border="default" />
  <Placeholder rounded="full" border="default" />
</div>