UI Component Gallery

Hub card for this catalog — copy-paste React + Tailwind, no kit.

Monthly series with Y/X axes, glow spline, and a hover tooltip.

Compare categories with labeled axes and hover values.

Hover a series to pin month + value next to the point.

Bars with a glow line overlay, axes, and tooltip.

Trend with Y/X axes and a follow-the-point tooltip.

Share of a whole.

Multi-axis scores.

Percent as a ring.

Primary, outline, and ghost actions.

On/off formatting or filters.

Choose one or many options in a segmented control.

A short menu of actions.

Pick one value from a visible list.

Removable tags for filters.

Show saturation × brightness for a hue.

Edit a hex color as text.

Pick from swatches or type hex.

Adjust hue 0–360.

Preview a single color.

Numeric range such as volume.

Immediate on/off settings.

Status pills.

Dismissible filter chips.

Small structured datasets.

Initials fallback for a person.

Avatar plus name and email.

Time-ordered events for a day.

Bulk actions for a selection.

Horizontally snap through slides.

Selectable rows with a sticky header.

Zero-data placeholder with a CTA.

Nested files and folders.

In-page section jump list.

Rich preview on hover or focus.

Columns of cards.

Product or asset tile.

A row of item tiles.

A single metric tile.

A row of metrics.

Rows with title, meta, and a chevron.

Static pin map — no Google Maps API.

Vertical status steps.

Dashboard tile with a headline number.

Pick a day in a month grid.

Labeled native date input.

Button that reveals a date input.

Start and end dates.

Click start then end on a mini grid.

Labeled native time input.

Show model reasoning steps.

File chip in a thread.

Two-bubble thread.

Inbox of conversations.

Typing indicator.

One bubble, user or assistant.

Copy / retry / feedback on a reply.

Citation chip to a doc.

Show a tool call in the transcript.

Fenced snippet in a reply.

Rendered markdown sample.

Composer for an agent.

Chip shortcuts into the composer.

Pending “thinking” text.

Inline status that is not a modal.

Determinate completion.

Placeholder while content loads.

Indeterminate wait.

Count a reaction.

Emphasized statistic.

Scale-down on press.

1–5 stars.

Up/down percent chip.

A single opt-in row.

Select several related options.

Single-line labeled field.

Multiline notes.

Pick exactly one option.

Collapsible list of options.

Filter a list while typing.

Color in a table cell.

Compact status in a cell.

Numeric weight in a cell.

Boolean in a cell.

Toggle sizes as buttons.

Click or drop files.

Sort control in a sentence.

OS select with a visible label.

Increment a count.

Month vs year as buttons.

Compact bold/italic/list editor.

Group a title and short body.

Separate sections, optionally with a label.

Split pane with a drag seam.

One open FAQ panel at a time.

Show page hierarchy.

Move between pages of results.

Switch related views.

Brand plus primary links.

Sidebar + top bar + main.

⌘K command palette.

Right-click style actions.

Two-option segmented control.

Primary app nav column.

Wizard progress.

Confirm a destructive action.

Rich content anchored to a button.

Short extra hint on hover/focus.

Pick a reaction glyph.

Right-side drawer for filters.

Framed media with alt text.

Inline code in prose.

Copyable command line.

Vertical gap without extra markup classes everywhere.