UI Components Library

A comprehensive collection of reusable UI components built with Next.js 15, TypeScript, and Tailwind CSS v4.

Quick Navigation

Buttons Cards Forms Modals Alerts Loading

Buttons

Button Variants

Sizes

States

<Button variant="primary" size="lg">Click me</Button>

Cards

Default Card

This is a default card with standard styling.

Elevated Card

This card has enhanced shadow effects.

<Card variant="elevated">
  <CardHeader>Title</CardHeader>
  <CardBody>Content</CardBody>
  <CardFooter>Actions</CardFooter>
</Card>

Form Components

Form Elements

<FormField name="email" label="Email" required>
  <Input type="email" placeholder="Enter email" />
</FormField>

Alerts & Feedback

Success!

Your changes have been saved successfully.

Warning

Please review your information before proceeding.

Error

Something went wrong. Please try again.

Information

This is an informational message for the user.

<Alert variant="success" title="Success!" closable>
  Your changes have been saved.
</Alert>

Loading States

Loading Components

Spinners

Progress Bars

50%

Skeletons

<Spinner size="lg" color="primary" />
<Progress value={75} variant="success" showLabel />
<Skeleton variant="text" width="100%" />

Interactive Demos

Try the Components

Usage Guidelines

Getting Started

Installation

All components are already set up in your project. Simply import them from their respective paths:

import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardBody } from '@/components/ui/card';
import { Input, FormField } from '@/components/ui/form';
import { Modal, useModal } from '@/components/ui/modal';
import { Alert, Spinner, Progress } from '@/components/ui/feedback';

TypeScript Support

All components are fully typed with TypeScript interfaces available in @/types/ui.

Customization

Components support custom classes via the className prop and use the cn() utility for class merging:

<Button className="shadow-xl custom-class" variant="primary">
  Custom Button
</Button>

Accessibility

All components include proper ARIA attributes, keyboard navigation, and screen reader support.

Server Components

Most components are server components by default. Interactive components like Modal and Toast are client components.