stubui
99 components
(~ - - - - - - ~)
(~              ~)
(~ - - - - - - ~)

Aspect Ratio

Maintains a consistent width-to-height ratio for content

[ panel ] | (~ panel ~)

Resizable

Drag-to-resize panel layout with a movable divider

- - - - - - - - - -

Separator

A visual divider between content sections

( Home ) / ( Section ) / ( Page )

Breadcrumb

Hierarchical navigation trail showing current location

[ File ] [ Edit ] [ View ] [ Help ]

Menubar

A horizontal menu bar with dropdown menus

[logo] (~ Home  Products  About ~) [btn]

Navigation Menu

A top-level site navigation with dropdown panels

[ < ] [ 1 ] [ 2 ] [●3●] [ 4 ] [ 5 ] [ > ]

Pagination

Controls for navigating between pages of content

+-------------------+
| Tooltip text      |
+-------------------+
        ^
   ( trigger )

Tooltip

A brief label that appears on hover to explain an element

[ Button ]

Button

A clickable element that triggers an action

[ Left ]|[ Center ]|[ Right ]

Button Group

Multiple related buttons grouped together

[✓] Label text
[ ] Label text
[ ] Label text

Checkbox

A toggleable boolean input with a checkmark

[ mm / dd / yyyy  [cal] ]

Date Picker

An input that opens a calendar for date selection

Label *
(~ input value here ~)
! Validation message

Field

A labeled form field with validation message support

(~ - - - - - - - - - ~)

Input

A single-line text entry field

[ prefix ] (~ - - input - - ~) [ suffix ]

Input Group

An input with attached prefix or suffix elements

[ 1 ] [ 2 ] [ 3 ] - [ 4 ] [ 5 ] [ 6 ]

Input OTP

Segmented one-time password entry fields

Label text

Label

An accessible text label for form controls

(~ Choose option... v ~)

Native Select

The browser's native dropdown select element

(●) Option One
( ) Option Two
( ) Option Three

Radio Group

A set of mutually exclusive radio button options

|----●-----------| 35%

Slider

A draggable range input for selecting a numeric value

OFF [   ] ON
    [●  ]

Switch

A toggle switch for boolean on/off state

[ B ] [ I ] [●U●]

Toggle

A button that can be toggled between pressed and unpressed states

[●Bold●] [ Italic ] [ Under ]

Toggle Group

A group of toggle buttons where one or more can be active

(avatar)
  [ MN ]

Avatar

A user profile image or initials fallback

( New ) ( ● Live ) ( Error )

Badge

A small status label for categorization or state

  |            *
  |        *  *
  |    *  *  *  *
  +--+--+--+--+--
     Q1 Q2 Q3 Q4

Chart

Data visualization in bar, line, or pie format

(~ ~)
  [ ]
  No items found
  [ Add item ]

Empty

A placeholder state shown when a list or collection is empty

[ Ctrl ] + [ K ]

Kbd

Keyboard shortcut display using key cap styling

# Heading 1
## Heading 2

Body paragraph text goes here.

> Blockquote text

Typography

A set of text styles for consistent typographic hierarchy

[████████████░░░░░░░░] 60%

Progress

A bar showing completion percentage of a task

( - )  ( \ )  ( | )  ( / )

Spinner

An animated loading indicator showing work in progress

LTR: [ --> ]
RTL: [ <-- ]

Direction

Sets text direction context for RTL/LTR language support

★ ★ ★ ☆ ☆  (3 of 5)

Rating

Star rating input for user feedback and scoring

(●)---(●)---(○)---( )
  1     2     3     4
 Info  Info Current

Stepper

A step indicator for multi-stage wizards and flows

  ●  Event title
  |  Description text
  |
  ○  Event title
  |  Description text
  |
  ○  Future event

Timeline

A vertical chronological sequence of events with connectors

+------------------+
| Revenue          |
| $12,400          |
| +12% vs last mo  |
+------------------+

Stat / Statistic

A metric display with value, label, and optional trend delta

(~ (tag x) (tag x) (new tag...) ~)

Tags Input

A multi-value input that creates removable tag chips

[●Month●] [ Week ] [  Day  ]

Segmented Control

A compact grouped toggle for switching between a few options

[ - ] [ 42 ] [ + ]

Number Input

A numeric input with increment and decrement controls

(● Active x) (Draft x) (Pending x)

Chip / Tag

An interactive label that can be dismissed or selected

+--------------------+
| [hue gradient      |
|  saturation box  ] |
| [## hex input   ]  |
+--------------------+

Color Picker

A visual selector for choosing colors via hue and saturation

[logo] (~ Home  Products  About ~) [ Login ]

Navbar

A top navigation bar with logo, links, and action buttons

  ●
[ icon ]

Indicator

A small dot positioned at a corner to indicate status or count

Root
+-- Folder
|   +-- File.txt
|   +-- File.md
+-- Folder
    +-- File.ts

Tree View

A hierarchical file-tree style expandable list

(~ ~)
  [ ? ]

  Nothing here yet
  Add your first item

  [ + Create ]

Empty State

A full empty state with icon, heading, message, and call to action

● Online   ○ Offline   ◌ Away

Status Indicator

A dot indicator showing connection or presence status

Click to edit: [ value here ]

Editable

Inline text that becomes an editable input on click

Once upon a time in a land...
[+  Show more  ]

Spoiler

Truncated text with a show/hide toggle to expand content

[ ••••••••••••  [show] ]

Password Input

A password field with a toggle to reveal the entered text

+-------+
|* * *  |
|  * *  |
|* *  * |
+-------+

QR Code

A scannable QR code display for URLs and data

[ 02 ] : [ 34 ] : [ 59 ]
  hr      min     sec

Countdown

A countdown timer displaying remaining time

- old line removed
+ new line added
  unchanged line

Diff / Comparison

Side-by-side or inline diff view for comparing text changes

   ___
  /   \
 |  75%|
  \___/

Ring Progress

A circular progress ring indicator showing percentage

+--[o][o][o]--------+
| browser content    |
|                    |
+--------------------+

Mockup Frames

Browser, phone, or window frame wrappers for content mockups

+---------------------------+
|                           |
|        ~~signature~~      |
|___________________________|

Signature Pad

A freehand drawing surface for capturing signatures

(~ DRAFT  DRAFT  DRAFT ~)
(~ DRAFT  DRAFT  DRAFT ~)

Watermark

A repeating background overlay for content protection

+----------------------+
| Monthly Revenue      |
| $48,295       +12% ^ |
+----------------------+

Stat Card

A card combining a metric, label, and trend indicator

Name:     John Doe
Email:    john@example.com
Role:     Administrator
Status:   ● Active

Description List

Compact key-value pairs for displaying record details