Component Showcase

A realistic project management interface built entirely with Urbicon UI. Every element uses design tokens, semantic colors, and the component API. Explore each section to see how components compose together.

16 Components Used

4 Interactive Sections

3 Tab Views

Component Map

Which components are used in each section of the demo app.

App Shell

Header with branding, navigation, and user area

Avatar Breadcrumb Separator Tooltip Alert

Overview Tab

Stats grid, progress bar, and team members

Card Badge Avatar Tooltip

Tasks Tab

Filterable task list with search and priority

Input Menu Button Card Checkbox Badge Avatar Tooltip Pagination

Settings Tab

Accordion-based preferences with toggles and inputs

Accordion AccordionItem Toggle Input Button Card Skeleton

Live Demo

Fully interactive -- try the tabs, search, filters, and toggles.

Urbicon Project Hub

Sprint 12 ends in 3 days. 2 tasks remaining.

Total Tasks

Sprint 12

Completed

75%

In Progress

On track

Team Members

Active

Sprint Progress

75%

Team

All Components

Every component used in this showcase, linked to its documentation.

Accordion AccordionItem Alert Avatar Badge Breadcrumb Button Card Checkbox Input Menu Pagination Separator Skeleton Toggle Tooltip

UI Recipes

Copy-paste ready patterns

All Components

Browse the full library

Getting Started

Set up in 5 minutes