Component Library

Buttons

Button Variants

Button Sizes

Disabled Buttons

Cards

Default Card

This is a default card with shadow and border styling.

Outlined Card

This card has a thicker border and no shadow.

Elevated Card

This card has an elevated shadow for emphasis.

Card with Large Padding

This card demonstrates the large padding option, providing more breathing room for content.

Inputs

Input Variants & States

Default Input

This is helper text

With Value

Success State

Error State

This field is required

Disabled Input

Input Sizes

Badges

Badge Variants

PrimarySecondarySuccessWarningErrorAccent

Badge Sizes

SmallMediumLarge

Badge Usage Examples

Status:Active

Priority:High

Category:Featured

Alerts

Information

This is an informational alert with primary styling.

Success!

Your action was completed successfully.

Warning

Please review the information before proceeding.

Error

There was an error processing your request.

This is a simple alert without a title.

Complex Example

User Profile

Manage your account information

Verified

First Name

Last Name

Email Address

Phone Number

We'll only use this for account security

Profile Tips

Keep your profile information up to date to ensure the best experience.

Component Library Usage

To use these components in your application, import them from the UI components:

import { Button, Card, Input, Badge, Alert } from '@/components/ui';

// Example usage
<Button variant="primary" size="lg">
  Click Me
</Button>

<Card variant="elevated">
  <CardHeader>
    <CardTitle>My Card</CardTitle>
  </CardHeader>
  <CardContent>
    <Input label="Name" placeholder="Enter your name" />
  </CardContent>
</Card>