Skip to main content

ShadCN Components

All custom UI components are located in the components/ui/ folder and are built using shadcn/ui.

Folder Structure​

components/
├── ui/
    ├── Button.tsx
    ├── Badge.tsx
    ├── Card.tsx
    └── List.tsx

Button​

Import path: components/ui/Button

A button component for triggering primary and secondary actions.

Props​

  • variant: "primary" | "secondary" — style variant.
  • size: "sm" | "md" | "lg" — size of the button.
  • disabled: boolean — whether the button is disabled.

Example​

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

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

Badge​

Import path: components/ui/Badge

A badge component for indicating statuses or labels.

Props​

  • variant: "default" | "success" | "warning" | "error" — color variant.
  • size: "sm" | "md" — size of the badge.

Example​

import { Badge } from "components/ui/Badge";

<Badge variant="success">New</Badge>

Card​

Import path: components/ui/Card

A card container for grouping related content.

Sub-components​

  • Card
  • CardHeader
  • CardBody
  • CardFooter

Example​

import { Card, CardHeader, CardBody, CardFooter } from "components/ui/Card";

<Card>
  <CardHeader>Title</CardHeader>
  <CardBody>Content goes here.</CardBody>
  <CardFooter>Actions</CardFooter>
</Card>

List​

Import path: components/ui/List

Components for rendering ordered or unordered lists.

Sub-components​

  • List — container for list items.
  • ListItem — individual list item.
  • ListItemIcon — optional icon for a list item.

Example​

import { List, ListItem, ListItemIcon } from "components/ui/List";
import { CheckIcon } from "lucide-react";

<List>
  <ListItem>
    <ListItemIcon><CheckIcon /></ListItemIcon>
    <span>Item 1</span>
  </ListItem>
  <ListItem>
    <ListItemIcon><CheckIcon /></ListItemIcon>
    <span>Item 2</span>
  </ListItem>
</List>