Shadcn/ui Component Library

Text Colors

Foreground (Default)

Default text color for main content

Muted Foreground

Muted text for secondary information

Primary

Primary brand color text

Secondary Foreground

Secondary action text color

Accent Foreground

Accent text for emphasis

Destructive

Error or destructive action text

Card Foreground

Text color on card backgrounds

Popover Foreground

Text color in popovers

Color Combinations

Primary

Primary background with foreground text

Secondary

Secondary background with foreground text

Muted

Muted background with foreground text

Accent

Accent background with foreground text

Destructive

Destructive background with foreground text

Card

Card background with foreground text

Popover

Popover background with foreground text

Background

Default background with foreground text

Buttons

Form Inputs

Data Display

DefaultSecondaryDestructiveOutline
AB

Current page: 2

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00

Alerts

Tabs

Account
Make changes to your account here.

Accordion

Collapsible

Overlays

Menus

Calendar

February 2026

Carousel

1
2
3
4
5

Toggle

Layout Components

16:9 Aspect Ratio

Item 1: This is a scrollable content area
Item 2: This is a scrollable content area
Item 3: This is a scrollable content area
Item 4: This is a scrollable content area
Item 5: This is a scrollable content area
Item 6: This is a scrollable content area
Item 7: This is a scrollable content area
Item 8: This is a scrollable content area
Item 9: This is a scrollable content area
Item 10: This is a scrollable content area
Item 11: This is a scrollable content area
Item 12: This is a scrollable content area
Item 13: This is a scrollable content area
Item 14: This is a scrollable content area
Item 15: This is a scrollable content area
Item 16: This is a scrollable content area
Item 17: This is a scrollable content area
Item 18: This is a scrollable content area
Item 19: This is a scrollable content area
Item 20: This is a scrollable content area

Resizable Panels

Panel One
Panel Two

Toast

AI ChatBox

A ready-to-use chat interface component that integrates with the LLM system. Features markdown rendering, auto-scrolling, and loading states.

This is a demo with simulated responses. In a real app, you'd connect it to a tRPC mutation.

How can I help you today?