UI Components

Base UI components for building consistent interfaces.

← Back to Components

Table of Contents

UI Components

UI Components

Button#

A button component that can be customized with various styles and behaviors.

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


<Button>Click me</Button>

Card#

A card container with flexible layout options for various content types.

Card Title

Card description goes here

Card content

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


<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Input#

A text input field component with various configuration options.

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


<Input placeholder="Type something..." />

Tabs#

A tabbed interface component for organizing and switching between different views without navigating to a new page.

Basic

Account Settings

Manage your account information and preferences.

Form Example

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"


// Basic Tabs
<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account content</TabsContent>
  <TabsContent value="password">Password content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
</Tabs>


// Form Example
<Tabs defaultValue="login" className="w-full">
  <TabsList className="grid w-full grid-cols-2">
    <TabsTrigger value="login">Login</TabsTrigger>
    <TabsTrigger value="register">Register</TabsTrigger>
  </TabsList>
  <TabsContent value="login">
    <div className="space-y-4">
      <div className="space-y-1">
        <Label htmlFor="email">Email</Label>
        <Input id="email" placeholder="Enter your email" />
      </div>
      <div className="space-y-1">
        <Label htmlFor="password">Password</Label>
        <Input id="password" type="password" />
      </div>
      <Button className="w-full">Sign in</Button>
    </div>
  </TabsContent>
  <TabsContent value="register">
    {/* Registration form fields */}
  </TabsContent>
</Tabs>