Component Library

A collection of beautiful, accessible, and reusable components built with React, Tailwind CSS, and Radix UI

Badges

Display short labels with various styles and colors

Default
Secondary
Destructive
Outline
Success
Warning
Info
Gradient
typescript
import { Badge } from "@/components/ui/badge";

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="gradient">Gradient</Badge>

Alerts

Display important messages with icons and dismiss functionality

typescript
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

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

Cards

Flexible container component for displaying content

API Integration

Connect your AI models seamlessly

Our REST API makes it easy to integrate powerful AI capabilities into your applications with just a few lines of code.

Featured Card

Highlighted with a custom border

Cards can be customized with different borders, backgrounds, and hover effects to match your design.

typescript
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your content here</p>
  </CardContent>
</Card>

Spinners

Loading indicators in various sizes and styles

Small

Medium

Large

XL

typescript
import { Spinner } from "@/components/ui/spinner";

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" variant="secondary" />

Progress

Show completion status with animated progress bars

Progress66%
Custom Color33%
typescript
import { Progress } from "@/components/ui/progress";

<Progress value={66} />
<Progress value={33} indicatorClassName="bg-gradient-to-r from-purple-500 to-pink-500" />

Tabs

Organize content into switchable sections

This is the preview tab. You can display any content here.

Preview content goes here

typescript
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">Preview content</TabsContent>
  <TabsContent value="code">Code content</TabsContent>
</Tabs>

Avatars

Display user profile images with fallbacks

CNJDSKAB
typescript
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";

<Avatar>
  <AvatarImage src="/avatar.jpg" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Stat Cards

Display key metrics with icons and trends

Total Users

50,234

+12.5% from last month

Active Sessions

2,847

+8.2% from last week

AI Requests

1.2M

+45.1% from yesterday

typescript
import { StatCard } from "@/components/StatCard";
import { Users } from "lucide-react";

<StatCard
  title="Total Users"
  value="50,234"
  change="+12.5% from last month"
  changeType="positive"
  icon={Users}
  gradient="from-purple-500 to-pink-500"
/>

Timeline

Display events in chronological order

Product Launch

Jan 2025

Released version 1.0 of our AI platform

API v2 Released

Dec 2024

Launched faster, more efficient API

Reached 50K Users

Nov 2024

Hit major milestone in user growth

Company Founded

Jun 2024

Started the journey to democratize AI

typescript
import { Timeline } from "@/components/Timeline";
import { Rocket } from "lucide-react";

<Timeline
  items={[
    {
      title: "Product Launch",
      description: "Released version 1.0",
      date: "Jan 2025",
      icon: Rocket,
    },
  ]}
/>

Inputs

Form inputs with various types and styles

typescript
import { Input } from "@/components/ui/input";

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

Code Blocks

Display code with syntax highlighting and copy functionality

typescript
1import { CodeBlock } from "@/components/CodeBlock";
2
3function Example() {
4  const message = "Hello, World!";
5  console.log(message);
6  return <div>{message}</div>;
7}

Buttons

Interactive buttons in various styles and sizes

typescript
import { Button } from "@/components/ui/button";

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button size="lg">Large</Button>
<Button disabled>Disabled</Button>