Components

Core UI components with Cenpact styling patterns.

Buttons

tsx

// Primary CTA
<Button className="h-9 px-4 text-sm rounded-full">
  Get Started
  <ArrowRight className="h-3 w-3 ml-1.5" />
</Button>

// Secondary
<Button variant="outline" className="h-8 px-3 text-xs rounded-full">
  View Docs
</Button>

// Ghost
<Button variant="ghost" size="sm" className="h-7 text-xs">
  Cancel
</Button>

Badges

OutlineConnectedPendingError

tsx

// Outline
<Badge variant="outline" className="rounded-full px-3 py-0.5 text-[10px]">
  Beta
</Badge>

// Status badges
<Badge className="rounded-full px-2 py-0.5 text-[10px] bg-emerald-500/10 text-emerald-500 border-0">
  Connected
</Badge>

Cards

Standard Card

Basic card with subtle border and padding.

Popular

Highlighted Card

With shadow and badge, no color inversion.

tsx

// Standard card
<div className="rounded-xl border border-border/50 bg-card p-5">
  {children}
</div>

// Highlighted card (badge, no color inversion)
<div className="relative rounded-xl border border-border bg-card p-5 shadow-lg">
  <Badge className="absolute -top-2.5 left-4">Popular</Badge>
  {children}
</div>

Tabs

Tabs must use whitespace-nowrap to prevent text like "API Keys" from wrapping on mobile.

General settings content

tsx

// TabsTrigger - whitespace-nowrap is critical!
<TabsTrigger className={cn(
  "px-3 md:px-4 py-3 text-xs md:text-sm font-medium",
  "whitespace-nowrap shrink-0",  // Prevents wrapping
  "text-muted-foreground hover:text-foreground",
  "data-[state=active]:text-foreground"
)}>

// TabsList - enables horizontal scroll on mobile
<TabsList className="flex w-full flex-nowrap overflow-x-auto">

Form Rows

Desktop-only horizontal layout.

Project name

Displayed in dashboard

Status

Active or inactive

Active

tsx

<div className="flex items-center justify-between px-4 py-3 border-b border-border/40">
  <div className="space-y-0.5">
    <p className="text-xs font-medium">Label</p>
    <p className="text-[10px] text-muted-foreground">Description</p>
  </div>
  <Input className="w-48 h-8 text-sm" />
</div>

Settings Form Rows (Mobile-Responsive)

Stacks vertically on mobile, horizontal on desktop.

Project name

Displayed throughout the dashboard.

Project ID

Reference used in APIs.

my-project-id

tsx

// Stacks on mobile, horizontal on desktop
<div className="flex flex-col md:flex-row md:items-center md:justify-between px-4 py-3 border-b border-border/40 gap-2 md:gap-0">
  <div className="space-y-0.5">
    <p className="text-sm md:text-xs font-medium">Label</p>
    <p className="text-xs md:text-[10px] text-muted-foreground">Description</p>
  </div>
  <Input className="w-full md:w-64 h-10 md:h-8 text-sm md:text-xs" />
</div>

// Save button row
<div className="flex justify-end px-4 py-2.5 md:py-2 bg-muted/20">
  <Button size="sm" className="h-9 md:h-7 px-4 md:px-3 text-sm md:text-xs">
    Save changes
  </Button>
</div>

Inputs

Default

Error

This field is required

With hint

We'll never share your email