@tejas-bhatt/ui

A modern, type-safe UI component library built on top of shadcn/ui, React, and Tailwind CSS.

Features

• 🎨 Beautiful Components - Pre-styled components following modern design principles
• 🔧 Fully Customizable - Built with Tailwind CSS for easy customization
• 📝 TypeScript First - Full TypeScript support with proper type definitions
• 🎯 Accessible - Built on Radix UI primitives for accessibility
• 🎪 Variant System - Consistent API using class-variance-authority
• 🌙 Dark Mode Ready - Built-in dark mode support

Installation

npm install @tejas-bhatt/ui
# or
yarn add @tejas-bhatt/ui
# or
pnpm add @tejas-bhatt/ui

Setup

Import the CSS file in your app root:

import '@tejas-bhatt/ui/styles.css'

Make sure your project has the required peer dependencies:

• React 18+
• Tailwind CSS 4+

Usage

import { Button, Card, CardHeader, CardTitle, CardContent } from '@tejas-bhatt/ui'

export function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello World</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  )
}

Components

Button

Versatile button component with multiple variants and sizes.

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

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">Icon</Button>

Card

Container component with header, content, and footer sections.

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    Card content goes here
  </CardContent>
  <CardFooter>
    Card footer content
  </CardFooter>
</Card>

Input

Form input component with consistent styling.

<Input type="email" placeholder="Enter email" />
<Input type="password" placeholder="Password" />
<Input disabled placeholder="Disabled input" />

Label

Accessible label component for form controls.

<Label htmlFor="email">Email Address</Label>
<Input id="email" type="email" />

Badge

Small status indicators and tags.

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

Utilities

cn()

A utility function for conditionally joining classNames. It combines clsx and tailwind-merge for optimal Tailwind CSS class handling.

import { cn } from '@tejas-bhatt/ui'

const className = cn(
  'base-classes',
  condition && 'conditional-classes',
  'more-classes'
)

Development

This library is built with:

• React - UI library
• TypeScript - Type safety
• Tailwind CSS - Styling
• Radix UI - Accessible primitives
• class-variance-authority - Variant management
• tsup - Build tool

License

MIT