UI components

Live catalog of shadcn-style primitives and shared CRM UI — use this page when building new modules.

Button

components/ui/button.jsx

Badge

components/ui/badge.jsx
Default
Secondary
Outline
Destructive

Input & Textarea

components/ui/input.jsx

Checkbox

components/ui/checkbox.jsx

Toggle (Switch)

components/ui/switch.jsx

Radio

components/ui/radio-group.jsx

Select

lib/ui/FormSelect.jsx

Multi-select

lib/ui/MultiSelect.jsx
Leads
Deals

Dialog

components/ui/dialog.jsx

Sheet

components/ui/sheet.jsx

Drawer

components/ui/sheet.jsx (side=bottom)

Toast

sonner — modules/Layout

Date picker

Shadcn-style popover calendar for single-date fields.

components/ui/date-picker.jsx

Date range

app/Analytics/components/DateRangeFilter.jsx
Reporting period

Table

components/ui/table.jsx
NameStatusOwner
Acme Corp
Active
Sarah Chen
Northwind LLC
Pending
John Doe

Card

components/ui/card.jsx

Module shell

Standard card header pattern

Wrap stats, charts, and forms in Card for consistent spacing.

Open deals

128

Metric cards

KPI strip used on Marketing, Subscriptions, E-commerce, and Analytics.

app/Marketing/index.jsx · app/Subscriptions/index.jsx
+6%

$48.2k

MRR

+4%

312

Active subs

−0.3%

2.1%

Churn

+4%

32.4%

Open rate

Charts

shadcn/ui chart components built on Recharts (ChartContainer, tooltips, legends).

components/ui/chart.jsx + components/charts/

Area Chart — Interactive

Showing total visitors for the last 3 months

Bar Chart — Interactive

Showing total visitors for the last 3 months

Module tabs

Sub-navigation for multi-route modules (Marketing, Subscriptions, CMS).

app/Marketing/MarketingLayout.jsx

Active tab: overview

Timeline

Billing / activity history on subscription and CRM detail pages.

app/Subscriptions/SubscriptionDetail/index.jsx

  1. Renewed

    Subscription renewed for $129.00

  2. Upgraded

    Upgraded from Starter to Growth

  3. Created

    Subscription created

List toolbar

Search, filter, and export row above data tables.

app/Marketing/index.jsx · app/Subscriptions/index.jsx

Table + actions

Selectable rows with per-row dropdown menus.

app/Marketing/index.jsx
NameStatus
Onboarding Drip
Active
Win-back Campaign
Scheduled

Status badges

Semantic variants for CRM entity states.

Campaigns

Active
Scheduled
Completed

Subscriptions

Active
Trialing
Past Due
Canceled

Finance

Paid
Pending
Overdue

Empty state

Placeholder when filters return no results.

No results found

Try adjusting your search or filters.

← Back to agency site