Sola UI Components

A modern React component library built with TypeScript, Vite, and shadcn/ui. This library provides both custom components and beautifully designed shadcn/ui components with full TypeScript support.

Installation

npm install sola-ui-components

Setup

1. Install Peer Dependencies

npm install @radix-ui/react-dialog @radix-ui/react-label @radix-ui/react-slot lucide-react

2. Import Styles

Import the component styles in your main CSS file or component:

/* In your globals.css, layout.tsx, or main CSS file */
@import 'sola-ui-components/styles.css';

Or import in your React component:

import 'sola-ui-components/styles.css'

3. Optional: Tailwind CSS Integration

If you're using Tailwind CSS in your project, the components will automatically inherit your Tailwind configuration. The library is compatible with both Tailwind CSS v3 and v4.

Usage

Original Components

import { Button, Input, Label } from 'sola-ui-components'
import 'sola-ui-components/styles.css'

function App() {
  return (
    <div>
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="Enter your email" />
      <Button>Submit</Button>
    </div>
  )
}

Shadcn/ui Components

import { 
  ShadcnButton, 
  Card, 
  CardHeader, 
  CardTitle, 
  CardContent,
  ShadcnInput,
  ShadcnLabel,
  Badge,
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  Alert,
  AlertDescription,
  cn 
} from 'sola-ui-components'
import 'sola-ui-components/styles.css'

function App() {
  return (
    <div className="p-6 space-y-4">
      <Card className="w-96">
        <CardHeader>
          <CardTitle>Login Form</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <ShadcnLabel htmlFor="email">Email</ShadcnLabel>
            <ShadcnInput id="email" type="email" placeholder="Enter your email" />
          </div>
          <ShadcnButton className="w-full">Sign In</ShadcnButton>
          <Badge variant="secondary">New User</Badge>
        </CardContent>
      </Card>

      <Alert>
        <AlertDescription>
          Welcome to our component library!
        </AlertDescription>
      </Alert>

      <Dialog>
        <DialogTrigger asChild>
          <ShadcnButton variant="outline">Open Dialog</ShadcnButton>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Dialog Title</DialogTitle>
          </DialogHeader>
          <p>Dialog content goes here.</p>
        </DialogContent>
      </Dialog>
    </div>
  )
}

Available Components

Original Components

• Button - A customizable button component
• Input - A styled input component
• Label - A label component for form elements

Shadcn/ui Components

• ShadcnButton - Modern button with variants (default, destructive, outline, secondary, ghost, link)
• Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent - Card layout components
• ShadcnInput - Styled input field
• ShadcnLabel - Accessible label component
• Badge - Status badges with variants (default, secondary, destructive, outline)
• Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription - Modal dialog components
• Alert, AlertDescription, AlertTitle - Alert notification components

Utilities

• cn - Class name utility function for merging Tailwind classes
• badgeVariants - Badge variant styles

Component Variants

Button Variants

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

Badge Variants

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

Adding New Shadcn/ui Components

To add more shadcn/ui components to the library:

1. Add the component using the shadcn CLI:

npx shadcn@latest add [component-name]

2. Copy the component from src/components/ui/ to lib/components/ui/

3. Update the import paths in the copied component from @/lib/utils to ../../lib/utils

4. Export the component in lib/main.ts

5. Rebuild the library with npm run build

TypeScript Support

This library is built with TypeScript and includes full type definitions. All components are properly typed and will provide IntelliSense in your IDE.

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build

# Lint code
npm run lint

# Start Storybook
npm run storybook

# Build Storybook for production
npm run build-storybook

Storybook

This library includes Storybook for component development and documentation. To run Storybook:

npm run storybook

Storybook Configuration

The library uses a specific Storybook configuration that works with Tailwind CSS v4:

• No tailwind.config.js required - Tailwind v4 configuration is handled in src/library.css
• Automatic style loading - Styles are imported in .storybook/preview.ts
• Required addons: @storybook/addon-a11y, @chromatic-com/storybook, @storybook/addon-docs

For detailed Storybook setup instructions, see docs/storybook-setup.md.

Requirements

• React >= 18.0.0
• React DOM >= 18.0.0

License

MIT