Color

Complete color palette: primary, secondary, accent, semantic, and dark mode.

Typography

Font scale, headings H1–H6, body, overline, caption, and code.

Spacing

Spacing scale, padding, margin, grid gap, and section rhythm.

Border Radius

Radius tokens xs–full for cards, inputs, buttons, and badges.

Shadow

Shadow tokens xs–xl for element depth and elevation.

Grid System

12-column grid documentation, breakpoints, and layout rules.

Breakpoints

Responsive breakpoint scale: xs, sm, md, lg, xl, 2xl.

Animation

Keyframe animations: fade, slide, scale, bounce, and spin presets.

Transition

Duration, easing, and transition presets for UI animations.

Z-Index

Layer stacking context: base, dropdown, sticky, modal, tooltip.

Dark Mode

Dark theme system: tokens, toggle, and implementation strategy.

HSThemeSwitch

Design Tokens

Unified design token reference: color, spacing, radius, shadow, typography.

CSS Variables

CSS custom property definitions and usage patterns.

Theme Engine

Runtime theming system: token override, scoped themes, and cascade strategy.

Theme Presets

Ready-made theme presets: default, minimal, bold, earthy, and more.

Section

Full-width section wrapper with vertical rhythm and background options.

Container

Max-width content container with responsive horizontal padding.

Row

Flexbox row wrapper for column-based layouts.

Column

Responsive column units within a row or grid.

Grid

CSS Grid layout with configurable columns and gap.

Flex Layout

Flexbox utility layout with alignment and direction controls.

Sidebar Layout

Two-column layout with a fixed or fluid sidebar.

Split Layout

Equal-split two-column layout for side-by-side content.

Dashboard Layout

App-style layout with sidebar, topbar, and scrollable main area.

Sticky Header

Header that sticks to the top of the viewport on scroll.

Sticky Sidebar

Sidebar that sticks within its parent scroll container.

Offcanvas Layout

Slide-in panel layout for mobile and responsive navigation.

Masonry Layout

Pinterest-style masonry grid for variable-height cards.

Navbar

Responsive top navigation bar with logo, links, and actions.

Mega Menu

Full-width dropdown navigation with grouped links and featured content.

Sidebar Navigation

Vertical navigation sidebar with collapsible sections.

Mobile Navigation

Mobile-optimized nav: hamburger toggle, drawer, and bottom bar variants.

Breadcrumb

Hierarchical path indicator for current page location.

Pagination

Page navigation controls: numbered, prev/next, and load-more styles.

Tabs

Horizontal and vertical tab interfaces for switching content panes.

Dropdown Menu

Contextual dropdown menus triggered by button or hover.

Anchor Navigation

In-page anchor links with smooth scroll and active highlight.

Table Of Contents

Auto-generated TOC from headings with scroll-spy active state.

Primary Button

High-emphasis filled button for primary actions.

Secondary Button

Medium-emphasis button for secondary actions.

Outline Button

Border-only button for lower-emphasis actions.

Ghost Button

Transparent button with hover fill for minimal UIs.

Link Button

Inline text-link styled as a button action.

Icon Button

Square or circular button containing only an icon.

Floating Action Button

Elevated circular button for the primary screen action.

Loading Button

Button with integrated loading spinner and disabled state.

Button Group

Horizontally grouped set of related action buttons.

Social Buttons

Brand-colored buttons for social login and sharing.

Text Input

Single-line text field with label, placeholder, and helper text.

Textarea

Multi-line text input with auto-resize and character count.

Select

Native HTML select dropdown with styled wrapper.

Tom Select

Enhanced searchable select with tagging support via Tom Select.

TomSelect

Multi Select

Select multiple values with tag-style chips.

Ajax Select

Remote-data select with async search and loading state.

Tag Input

Free-form tag entry with keyboard and paste support.

Checkbox

Single and grouped checkboxes with indeterminate state.

Radio Button

Single-select radio groups with label and description.

Toggle Switch

On/off toggle switch with accessible label and state.

Range Slider

Single and dual-handle range input with value display.

Search Input

Search field with icon, clear button, and optional suggestions.

Date Picker

Calendar-based date and date-range picker component.

Time Picker

Clock or dropdown-based time selection input.

File Upload

Drag-and-drop and click-to-browse file upload zone.

Input Group

Combined input with prefix/suffix text, icons, or buttons.

Form Validation

Inline error messages, success states, and constraint patterns.

Contact Form

Ready-to-use contact form: name, email, message, and submit.

Newsletter Form

Email subscription form with single input and CTA button.

Lead Form

Multi-field lead capture form with optional step progression.

Modal

Centered dialog overlay with backdrop, header, body, and footer.

Drawer

Side-anchored sliding panel for detail views and actions.

Offcanvas

Off-screen panel that slides in from any edge.

Tooltip

Small contextual label appearing on hover or focus.

Popover

Rich contextual popup with title, content, and arrow.

Alert Dialog

Blocking confirmation dialog requiring user action.

Lightbox

Full-screen media viewer with navigation controls.

Cookie Notice

GDPR-compliant cookie consent banner with accept/decline.

Age Verification

Age gate overlay requiring confirmation before content access.

Announcement Popup

Promotional modal for announcements, offers, and news.

Card

Flexible content container with header, body, footer, and media.

Accordion

Collapsible content panels with smooth expand/collapse animation.

Timeline

Vertical or horizontal event/step timeline with markers.

List Group

Styled list of items with optional icons, badges, and actions.

Badge

Small inline label for status, count, and category tags.

Chip

Compact interactive label for filters, tags, and selections.

Avatar

User image or initials display with size and group variants.

Statistic Card

Highlighted metric display with label, value, and trend.

Feature Card

Icon + title + description card for feature showcases.

Pricing Card

Pricing tier card with plan name, price, features, and CTA.

Team Member Card

Profile card with photo, name, role, and social links.

Testimonial Card

Customer quote card with avatar, name, and star rating.

FAQ Item

Single expandable Q&A item for FAQ sections.

Alert

Inline contextual message: info, success, warning, and error.

Toast

Temporary floating notification with auto-dismiss.

Notification

Persistent notification panel item with icon and timestamp.

Progress Bar

Horizontal bar showing task or upload completion percentage.

Spinner

Circular loading indicator in multiple sizes and colors.

Skeleton

Placeholder shimmer for content loading states.

Empty State

Illustrated empty placeholder with title, description, and CTA.

Error State

Error placeholder with icon, message, and retry action.

Success State

Confirmation screen after a completed action.

Maintenance State

Service unavailable screen for planned downtime.

Single Image

Responsive image with aspect ratio, caption, and lazy loading.

Image Gallery

Grid-based image gallery with lightbox and masonry options.

Carousel

Auto-play and manual image/content carousel with indicators.

Slider

Content slider with navigation arrows and swipe support.

Video

Embedded video player with poster, controls, and aspect ratio.

Video Popup

Thumbnail with play button that opens video in a modal.

Before After

Drag-handle image comparison slider.

Logo Cloud

Static grid of partner or client logos.

Logo Carousel

Auto-scrolling marquee of logos.

Icon Showcase

Browsable icon grid with copy-to-clipboard support.

Icon Picker

Searchable icon selector input component.

Map Embed

Embedded Google Maps or OpenStreetMap with marker and controls.

Basic Table

Simple HTML table with styled rows, headers, and zebra striping.

Responsive Table

Horizontally scrollable table for small viewports.

Sortable Table

Column-sortable table with ascending/descending toggle.

Data Grid

Feature-rich grid with pagination, filtering, and inline edit.

Pricing Table

Side-by-side plan comparison table with feature rows.

Comparison Table

Product or plan feature matrix with check/cross indicators.

KPI Card

Key performance indicator tile with value, label, and trend arrow.

Statistics Card

Metrics card with icon, primary value, and period comparison.

Revenue Widget

Revenue summary panel with totals and sparkline chart.

Sales Widget

Sales funnel or period-over-period sales summary.

Orders Widget

Recent orders list with status badges and quick view.

Bar Chart

Vertical and horizontal bar charts via Chart.js.

Chart.js

Line Chart

Single and multi-series line chart with tooltips.

Chart.js

Pie Chart

Pie and donut chart with legend and hover details.

Chart.js

Area Chart

Filled area chart for trend and volume visualization.

Chart.js

Sparkline

Inline mini chart for embedding trends inside cards and tables.

Activity Feed

Real-time or paginated list of system/user activity events.

Product Card

Compact product tile with image, name, price, rating, and add-to-cart.

Product Grid

Responsive multi-column product listing grid.

Product List

Horizontal list view of products with image and detail columns.

Product Gallery

Main image with thumbnail strip and zoom on hover.

Product Quick View

Modal overlay showing key product info without leaving the listing page.

Product Variant Selector

Color swatch, size button, and dropdown selectors for product variants.

Product Rating

Star rating display with score, count, and distribution breakdown.

Product Review

Individual review card with rating, author, date, and verified badge.

Product Badge

Overlay label for New, Sale, Bestseller, and Out of Stock states.

Product Tabs

Tab interface for Description, Specifications, and Reviews.

Product Comparison

Side-by-side attribute matrix for comparing multiple products.

Product Bundle

Frequently bought together bundle with combined price.

Stock Indicator

In stock, low stock, and out of stock inline status display.

Price Display

Regular, sale, and subscription pricing with currency formatting.

Related Products

Algorithmically or manually curated related product carousel.

Recently Viewed Products

Browser-session persisted recently viewed product strip.

Category Card

Image card with category name, product count, and link.

Category Grid

Responsive grid of category cards for top-level navigation.

Collection Banner

Full-width or split banner promoting a curated collection.

Collection Grid

Grid layout for collection cards with image and label.

Collection Carousel

Scrollable carousel of collections with auto-advance option.

Brand Grid

Logo grid for browsing products by brand.

Brand Card

Individual brand card with logo, name, and product count.

Featured Collection

Hero-style block highlighting a curated or seasonal collection.

Search Bar

Prominent search input with icon, placeholder, and submit action.

Search Result

Structured results page with count, sort, and result items.

Search Suggestion

Inline autocomplete dropdown with recent and trending suggestions.

Filter Sidebar

Collapsible sidebar with stacked filter groups.

Filter Drawer

Mobile slide-in drawer containing all filter controls.

Price Filter

Dual-handle range slider for min/max price filtering.

Brand Filter

Checkbox list for filtering products by brand name.

Category Filter

Nested checkbox tree for filtering by category and subcategory.

Active Filter Chips

Dismissible chip row showing currently applied filters.

Sort Toolbar

Toolbar with result count, sort dropdown, and view toggle.

No Result State

Empty results illustration with suggestions and clear-filters CTA.

Mini Cart

Compact cart popover triggered from the header icon.

Cart Drawer

Side-anchored slide-in cart panel with items and checkout CTA.

Cart Table

Full-page tabular cart with image, name, quantity, and subtotal.

Cart Summary

Order summary box with subtotal, discount, tax, and total.

Coupon Form

Promo code entry field with apply button and validation feedback.

Shipping Calculator

Address input form for estimating shipping costs.

Free Shipping Progress

Progress bar showing how close the cart is to free shipping.

Cart Upsell

Complementary product recommendations shown inside the cart.

Save For Later

Move items from cart to a saved wishlist for later purchase.

Checkout Steps

Step indicator showing Cart → Shipping → Payment → Confirmation.

Billing Form

Full billing address form with field validation.

Shipping Form

Shipping address form with same-as-billing checkbox.

Payment Method

Payment option selector: card, bank transfer, e-wallet, and COD.

Order Summary

Sticky checkout sidebar with item list and totals.

Order Tracking

Status timeline for tracking order from placement to delivery.

Invoice View

Printable invoice layout with order details and line items.

Payment Status

Pending, processing, success, and failed payment status screens.

Order Success

Post-purchase confirmation page with order number and next steps.

Login

Email and password login form with remember me and OAuth options.

Register

New account registration form with field validation.

Forgot Password

Email entry form for initiating password reset flow.

Reset Password

New password entry form reached via reset link.

Profile

Account profile editor with avatar, name, and contact fields.

Address Book

Saved shipping address list with add, edit, and default controls.

Order History

Paginated list of past orders with status and reorder action.

Wishlist

Saved products list with move-to-cart and share options.

Notifications

Account notification centre with read/unread and filter controls.

Loyalty Points

Points balance, history, and redemption interface.

Trust Badge

SSL, money-back, and security badges in row or grid layout.

Payment Icons

Accepted payment method icon strip: Visa, Mastercard, PayPal, etc.

Shipping Icons

Shipping benefit icons: fast delivery, free returns, tracked.

Guarantee Banner

Money-back or satisfaction guarantee highlight banner.

Secure Checkout

Lock icon and SSL label for checkout security reassurance.

Recently Purchased

Live-style notification of recent purchases by other customers.

Return Policy

Compact return and refund policy summary block.

Customer Satisfaction

NPS score, review aggregate, or satisfaction percentage display.

Store Statistics

Highlighted store metrics: orders, customers, rating, and years.

Social Proof

Live viewer count, purchase count, or popularity indicator.

Heading

Display, H1–H6, and overline heading styles with alignment options.

Text

Body text block with size, weight, and color variants.

Rich Text

Full prose block with headings, lists, links, and inline formatting.

Divider

Horizontal rule with style, width, and label variants.

Spacer

Explicit vertical spacing block with configurable height.

Icon

Standalone icon display with size, color, and background options.

Button

Inline block-level button with full variant and size range.

Alert

Embedded inline alert for info, warning, or error callouts.

Badge

Inline label badge for categories, status, or metadata.

Quote

Styled blockquote with optional citation and border accent.

Pull Quote

Large decorative quote lifted from body text.

Code Block

Preformatted code block with copy button and line numbers.

Syntax Highlight

Token-colored syntax highlighted code via Prism or Highlight.js.

Table Of Contents

Static or auto-generated table of contents for long-form content.

Reading Progress

Thin progress bar tracking scroll position through article content.

Hero Section

Above-the-fold hero with headline, subtext, CTA, and media.

CTA Section

Call-to-action section with headline, description, and button group.

Feature Grid

Grid of feature cards with icon, title, and short description.

Feature List

Vertical feature list with check icons and short copy.

Icon Box

Icon with heading and paragraph for benefit or service callouts.

Testimonial

Single testimonial quote with avatar, name, role, and stars.

Testimonial Slider

Auto-play or manual carousel of customer testimonials.

FAQ

Accordion FAQ section with grouped questions and answers.

Statistics

Row of bold metric figures with labels for social proof.

Counter

Animated number counter triggered on scroll into view.

Countdown

Live countdown timer for launches, sales, or events.

Brand Logos

Static client or partner logo grid for trust signals.

Trust Badges

Security, payment, and guarantee badge row.

Newsletter

Email capture section with headline, input, and submit CTA.

Announcement Bar

Top-of-page dismissible banner for promotions and alerts.

Promo Banner

Full-width or card-style promotional banner with image and CTA.

Popup Offer

Timed or exit-intent modal for offers and lead capture.

Team Grid

Responsive grid of team member profile cards.

Team Carousel

Horizontally scrollable team member carousel.

Team Member Profile

Full-detail profile with bio, photo, and social links.

Organization Chart

Hierarchical org chart with expandable tree nodes.

Company Timeline

Vertical or horizontal milestones timeline for company history.

Vision Mission

Side-by-side or stacked vision and mission statement block.

Values Section

Core values grid with icon, name, and short description.

Awards Section

Awards and recognition display with logos and years.

Partners Section

Strategic partners grid with logos and optional description.

Client Logos

Client logo wall with optional hover names and links.

Post Grid

Responsive grid of blog post cards with thumbnail, title, and meta.

Post List

Vertical list of posts with image, excerpt, and date.

Post Carousel

Horizontal carousel of blog posts with navigation.

Featured Post

Large hero-style featured article block with image and summary.

Recent Posts

Compact sidebar or widget listing of most recent posts.

Related Posts

Below-article grid of contextually related posts.

Author Box

Single author bio block with avatar, name, and description.

Author Grid

Multi-author grid with photo, name, post count, and links.

Categories Grid

Visual category cards with icon, name, and post count.

Tags Cloud

Tag cloud with variable font sizes by post frequency.

Reading Progress

Sticky top bar progress indicator for article reading depth.

Share Buttons

Social sharing button row for Twitter/X, Facebook, LinkedIn, and more.

Comments Section

Threaded comment display with reply, like, and pagination.

Portfolio Grid

Filterable grid of portfolio items with category toggle.

Portfolio Masonry

Variable-height masonry layout for portfolio thumbnails.

Portfolio Carousel

Swipeable carousel for displaying portfolio projects.

Project Showcase

Full-width highlighted project with images and description.

Case Study

Structured case study layout: challenge, solution, and results.

Before After

Interactive drag-slider comparing before and after states.

Client Showcase

Client project highlight with logo, summary, and outcome metrics.

Hero Widgets

Pre-built hero widget variants for page builder insertion.

Banner Widgets

Promotional and announcement banner widgets.

Product Widgets

Product card, grid, and carousel builder widgets.

Blog Widgets

Post grid, list, and featured post builder widgets.

Team Widgets

Team grid and member profile builder widgets.

Portfolio Widgets

Portfolio grid, masonry, and showcase builder widgets.

Marketing Widgets

CTA, testimonial, FAQ, and stats builder widgets.

Content Widgets

Rich text, quote, code, and media builder widgets.

Ecommerce Widgets

Cart, product, and conversion builder widgets.

Dynamic Widgets

Data-bound widgets populated from API, CMS, or query sources.

Homepage

Complete marketing homepage with hero, features, social proof, and CTA.

Landing Page

Conversion-focused single-column landing page template.

Company Profile

About us page with story, team, values, and contact sections.

Team Page

Full-page team directory with filter and profile links.

Services Page

Service listing page with icon boxes, features, and pricing.

Portfolio Page

Filterable portfolio listing with masonry or grid layout.

Blog Homepage

Blog index page with featured post, grid, and sidebar.

Single Post

Article reading template with TOC, rich text, and related posts.

Knowledge Base

Help centre layout with search, categories, and article list.

FAQ Page

Full FAQ page with grouped accordion sections and search.

Contact Page

Contact page with form, map embed, and contact details.

Product Detail

E-commerce PDP with gallery, variants, reviews, and related products.

Category Page

Shop category page with filter sidebar and product grid.

Cart Page

Shopping cart page with item table, summary, and checkout button.

Checkout Page

Multi-step checkout page template with form and order summary.

Account Page

Customer account dashboard with sidebar navigation and panels.

Error 404

Page not found screen with illustration and home/search links.

Error 500

Server error screen with error code and retry options.

Maintenance

Scheduled maintenance screen with estimated return time.

Coming Soon

Pre-launch page with countdown, teaser, and email capture.

Access Denied

Unauthorized access screen with login redirect and message.

Focus Management

Focus trap, focus restore, and initial-focus patterns for overlays.

ARIA Patterns

WAI-ARIA roles, states, and properties reference with live examples.

Keyboard Navigation

Roving tabindex, arrow key navigation, and shortcut patterns.

Color Contrast

WCAG AA/AAA contrast ratio checker and compliant palette reference.

Skip Navigation

Skip-to-content and skip-to-navigation link patterns.

Screen Reader Support

Live region, visually hidden text, and icon alt-text patterns.

Accessibility Audit Checklist

Structured WCAG 2.1 checklist with pass/fail criteria per guideline.

Component Playground

Interactive sandbox for testing component props and states live.

Theme Builder

Visual tool for customising design tokens and exporting themes.

Theme Switcher

Runtime toggle for switching between multiple theme presets.

Responsive Preview

Viewport simulator for previewing components at all breakpoints.

Variant Generator

Automated matrix of all component variant and state combinations.

Code Snippets

Searchable library of copy-ready HTML, CSS, and JS code snippets.

DaisyUI Showcase

Full DaisyUI component reference with live theme preview.

DaisyUI

SortableJS Showcase

Interactive SortableJS drag-and-drop examples and configuration.

SortableJS

Drag Drop Builder

Canvas-based page builder with drag-and-drop block placement.

Nested Sortable

Multi-level nested list drag-and-drop with tree structure.

Widget Registry

Registered widget catalogue with metadata and usage references.

Component Registry

Full component manifest with slots, props, and dependency map.

Block Registry

Block catalogue with thumbnail previews and insertion codes.

Template Registry

Page template library with screenshots and one-click scaffold.

Design Token Generator

Export design tokens to CSS variables, JSON, or Style Dictionary format.