UI Showcase

shadcn/ui · base-maia · Phosphor

Demo

Component Gallery

Common shadcn/ui components installed for this project, grouped by category with their variants, sizes, and interactive states.

Button

Variants, sizes, icons, and disabled state.

Variants

Sizes

With icons & states

Badge

Compact status and metadata labels.

Variants

DefaultSecondaryOutlineDestructiveGhostLink

Alert

Inline feedback with title and description.

Avatar

Sizes, fallback, badge, and group stacking.

Sizes

SMCNLGCN

Group

ALATGH
+3

Skeleton

Placeholder shapes for loading states.

Separator

Horizontal and vertical dividers.

Above the line

Below the line

LeftMiddleRight

Card

Composable surface for content blocks.

Project overview
Header, description, action, content, and footer slots.
New

Cards are a good base for settings panels, empty states, and dashboard widgets.

Compact card
Uses the smaller `size="sm"` density.

Useful when nesting cards or listing many items.

Input / Label / Textarea

Default, disabled, and invalid field states.

Enter a valid email address.

Checkbox / Switch / Radio

Binary and exclusive choice controls.

Checkbox

Switch

Radio group

Select

Single-value selection with placeholder and groups.

Tabs

Default pill list and line variant.

Manage your account details and profile.
Line tabs are good for page-level sections.

Accordion

Collapsible content sections.

A soft, rounded shadcn/ui style built on Base UI primitives with generous spacing and larger radii.

Progress

Determinate progress with label and value.

Uploading
x
Almost done
x
Complete
x

Table

Simple data table with caption and status badges.

A short list of sample teammates.
NameRoleStatus
Ada LovelaceEngineerActive
Alan TuringResearcherActive
Grace HopperAdmiralAway
Katherine JohnsonMathematicianActive

Scroll Area

Constrained viewport with a custom scrollbar.

Tooltip

Short hover/focus hints (requires TooltipProvider).

Sides

Popover

Floating content anchored to a trigger.

Dialog

Modal dialog with header, body, and footer actions.

Sheet

Slide-over panel from the edge of the viewport.

Toast (Sonner)

Ephemeral notifications via the global Toaster.

Triggers