Component Gallery

Clickable button with multiple variants, sizes, and loading states

Text input field for single-line data entry

Accessible label for form inputs

Multi-line text input for longer content

Monospaced text area for code or markup, where Tab indents

Toggle control for boolean values

Toggle switch for on/off states

Dropdown selection from a list of options

Searchable dropdown with autocomplete

Select multiple options from a dropdown

Single selection from a group of options

Range input for numeric values

Numeric input with increment/decrement controls

Date and time selection with calendar popup

One-time password input with individual digit fields

Drag-and-drop file upload with preview

Digital signature capture pad

Form field wrapper with label, input, and error handling

Container for grouped content with header, body, and footer

Contextual feedback messages with variants

Small status indicator or label

User profile image with fallback initials

SVG icon component with multiple icon options

Loading placeholder with pulse, shimmer, or static animation

Animated loading indicator

Determinate and indeterminate progress indicator

Flexible loading overlay for fullscreen, section, or inline use

Full-page branded loading screen with logo and progress

Section-level content wrapper with loading overlay

Modal dialog for focused interactions

Modal panel that slides in from the left, right or bottom edge

Confirmation dialog for destructive actions

Temporary notification messages

Contextual information on hover

Contextual menu with actions and options

Unread notification count indicator for bell icons

Single notification card with icon, title, message, and actions

Container for displaying a list of notifications with empty states

Modal dialog for viewing full notification details

Filter tabs for notification lists with counts

Toolbar for selecting and performing bulk actions on notifications

Sortable, paginated data table with row selection

Tabbed content organization

Dark control strip for search, filters, grouping and view toggles

Toolbar that folds filters behind a Filters button past three inline controls

Removable chips naming each active filter, with Clear all

Single-choice pill group for grouping or modes

List reordered by drag handle or keyboard, with announcements

Cards in columns, moved between columns by drag handle or keyboard

Icon-only switch between list, grid and map views

Constrains content to a fixed width-to-height ratio

Responsive image with lazy loading, placeholders, and error fallback

Video player with themed controls and full keyboard support

Compact audio player with themed controls and keyboard support

Lazy YouTube and Vimeo embeds that load nothing until clicked

Responsive gallery of media thumbnails with keyboard navigation

Swipeable media slides with dots, thumbnails, and optional autoplay

Full-screen media viewer with zoom, pan, and keyboard navigation

Base application wrapper with sidebar support

Admin dashboard with sidebar navigation

Public-facing pages with header and footer

Centered layout for authentication pages

Layout for error pages (404, 500, etc.)

Focused layout for form-heavy pages

Full-screen editor frame: outline, live canvas and inspector

Site header with navigation and user menu

Collapsible sidebar navigation

Site footer with links and copyright

Responsive app page header; secondary actions fold into an overflow menu

Labelled "Back to …" link or button

Page title with optional subtitle and actions

Content section with consistent spacing

Visual divider between content sections

Primary logo with variants and sizes

Animated loading state with logo