• umbrellaStrategic UX Platform
Platform
  • .design
  • .research
  • .systems
  • .dev
    • umbrella.ui
    • Documentation
  • .team
Knowledge
  • .foundations
  1. Home
  2. .dev
  3. UI Components

umbrella.ui

Beautifully designed components built with Radix UI and Tailwind CSS.

Avatar

Display

An image element with a fallback for representing the user

Button

Form

Versatile button component with multiple variants

Card

Display

Container component for grouping content

Input

Form

Text input fields with various configurations

Label

Form

Renders an accessible label for form elements

Separator

Layout

Visually or semantically separates content

Skeleton

Feedback

Placeholder for content that is loading

Tooltip

Overlay

Popup that displays information on hover

Breadcrumb

Navigation

Navigation breadcrumbs for hierarchical content

Dropdown Menu

Overlay

Menu that appears on click or hover

Sidebar

Navigation

Collapsible sidebar navigation

Table

Display

Displays data in a table format

Typography

Content

Styles for headings, paragraphs, lists, and text elements

Getting Started

Installation

Install components using the Shadcn CLI:

npx shadcn@latest add button

MCP Integration

This project has Shadcn MCP enabled. You can use natural language with AI assistants to browse, search, and install components directly.

Documentation

Each component page includes interactive examples, props documentation, accessibility guidelines, and implementation code.

Resources

Shadcn UI

Official Shadcn UI documentation and component library

Radix UI

Unstyled, accessible components for building design systems