ComponentsAll Variants Showcase

Components Overview

Detailed variations (Outlined, Filled, Description, Actions) mirroring real Base-UI / Tailwind implementations.

Buttons

Contained

Outlined & Ghost

Badges

DefaultPrimary

SecondarySecondary

DestructiveDestructive

OutlineOutline

Inputs & Forms

Text Fields

Standard Outlined Input

Filled Variant

Error State (with message)

This field is required.

Input Groups (Addons & Actions)

With Icon Addon (Start)

With Action Button (End)

Textarea Input

Cards Variations

Standard Card (With Description)

Subtext explaining the content of the card.

The main content of the card is padded consistently. This layout reflects the standard description slot configuration.

Card with Action Header

Header incorporates a trailing action block.

This card shows how the grid changes when an action slot is injected via Tailwind grid configurations.

Tables

ID	Patient Name	Status	Action
PT-001	John Doe	Completed
PT-002	Jane Smith	Pending

Modals & Dialogs

Edit Profile

Make changes to your profile here. Click save when you're done.

Name

Dropdowns & Menus

My Account

Profile⇧⌘P

Settings

Logout