@zuplo/ui

A comprehensive React component library built with TypeScript, Tailwind CSS, and Radix UI primitives. This library provides a complete set of accessible, customizable UI components for building modern web applications.

📚 Documentation: View Live Documentation

Installation

npm install @zuplo/ui

Peer Dependencies

This library requires React 18.3.1 or higher. Make sure you have React and React DOM installed:

npm install react react-dom

Quick Start

1. Import the Styles

First, import the CSS file in your application's entry point (e.g., main.tsx or App.tsx):

import '@zuplo/ui/styles';

2. Use Components

Import and use components as needed:

import { Button, Card, Input } from '@zuplo/ui';

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Card>
        <CardHeader>
          <CardTitle>Hello World</CardTitle>
        </CardHeader>
        <CardContent>
          <Input placeholder="Enter text..." />
        </CardContent>
      </Card>
    </div>
  );
}

Available Components

UI Components

Form Components

• Button - Versatile button component with multiple variants
• Input - Text input field
• Textarea - Multi-line text input
• Checkbox - Checkbox input
• Radio Group - Radio button group
• Switch - Toggle switch
• Select - Dropdown select
• Label - Form label
• Form - Form wrapper with validation support

Layout Components

• Card - Container card component
• Separator - Visual divider
• Aspect Ratio - Maintain aspect ratios
• Resizable - Resizable panels
• Scroll Area - Custom scrollable area

Navigation Components

• Breadcrumb - Breadcrumb navigation
• Navigation Menu - Navigation menu with dropdowns
• Menubar - Menu bar component
• Pagination - Pagination controls
• Tabs - Tab navigation

Overlay Components

• Dialog - Modal dialog
• Alert Dialog - Alert confirmation dialog
• ** Sheet** - Side panel sheet
• Drawer - Mobile drawer
• Popover - Popover tooltip
• Tooltip - Tooltip component
• Hover Card - Hover card
• Context Menu - Right-click context menu
• Dropdown Menu - Dropdown menu
• Command - Command palette

Feedback Components

• Alert - Alert message
• Toast - Toast notifications
• Progress - Progress bar
• Skeleton - Loading skeleton
• Badge - Badge component
• Avatar - User avatar

Data Display Components

• Table - Data table
• Chart - Chart component (using Recharts)
• Carousel - Image/content carousel
• Calendar - Date picker calendar
• Accordion - Collapsible accordion
• Collapsible - Collapsible content

Other Components

• Toggle - Toggle button
• Toggle Group - Toggle button group
• Slider - Range slider
• Input OTP - OTP input field
• Sidebar - Sidebar navigation

Blog Components

Specialized components for blog and documentation sites:

• BlogHeader - Blog post header with metadata
• BlogNav - Blog navigation component
• Callout - Callout box with variants (docs, sample, accent)
• CalloutCode - Code block callout
• CalloutDoc - Documentation reference callout
• CalloutSample - Sample code callout
• CalloutTip - Tip callout
• CalloutVideo - Video callout
• CalloutNextStep - Next step callout
• CalloutSplit - Split callout with multiple links
• CalloutAudience - Audience-specific callout
• FeatureList - Feature list display
• RelatedArticles - Related articles component
• TableOfContents - Table of contents
• WhatsIncluded - Feature inclusion list

Hooks

• useIsMobile - Hook to detect mobile viewport
• useToast - Hook for toast notifications

Utilities

• cn - Utility function for merging Tailwind classes (from @/lib/utils)

Examples

Button Variants

import { Button } from '@zuplo/ui';

<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Form with Validation

import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, Input, Button } from '@zuplo/ui';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';

const formSchema = z.object({
  email: z.string().email(),
});

function MyForm() {
  const form = useForm({
    resolver: zodResolver(formSchema),
  });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
}

Dialog

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@zuplo/ui';

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description goes here.</DialogDescription>
    </DialogHeader>
    {/* Your content */}
  </DialogContent>
</Dialog>

Toast Notifications

import { useToast } from '@zuplo/ui';
import { Toaster } from '@zuplo/ui';

function App() {
  const { toast } = useToast();

  return (
    <>
      <Toaster />
      <Button
        onClick={() => {
          toast({
            title: "Success",
            description: "Your action was completed.",
          });
        }}
      >
        Show Toast
      </Button>
    </>
  );
}

Styling

This library uses Tailwind CSS for styling. The styles are included when you import @zuplo/ui/styles.

Customization

The components use CSS variables for theming. You can customize the theme by overriding these variables in your CSS:

:root {
  --primary: 322 100% 49%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 0%;
  /* ... other variables */
}

See the full list of CSS variables in the styles.css file.

TypeScript Support

This library is written in TypeScript and includes full type definitions. All components are properly typed and support TypeScript's IntelliSense.

Requirements

• React 18.3.1 or higher
• Node.js 18 or higher (for development)

License

MIT

Support

For issues, questions, or contributions, please visit our GitHub repository.