Component Examples

Versatile button component with multiple variants, sizes, and states for actions and interactions

Flexible container component for displaying content with header, body, and footer sections

Text input component with support for various input types, states, and validation

Multi-line text input with character counting, auto-resizing, and multiple variants

Dropdown menu component for selecting options from a list with grouping and accessibility

Checkbox component for selecting one or more options with controlled and uncontrolled states

Small status indicator component for displaying tags, labels, and metadata

Alert component for displaying important messages with different variants (info, success, warning, error)

Tab component for organizing content into separate panels that can be switched between

Collapsible content component for organizing information into expandable sections

Modal dialog component for displaying overlays that require user interaction

Radio button group component for selecting a single option from mutually exclusive choices

Toggle switch component for binary on/off choices and settings

Accessible label component for form inputs and interactive elements

Slider component for selecting numeric values or ranges by dragging

Progress bar component for displaying task completion status and loading states

Loading skeleton component with pulse animation for placeholder content

Tooltip component for displaying contextual information on hover or focus

Advanced table component with sorting, filtering, search, and responsive design for side-by-side comparisons

Flexible tips and advice component with multiple layouts, category grouping, and priority highlighting

Display key statistics and facts in a scannable bar format for cities, regions, and attractions

Flexible card component for articles, recipes, restaurants, artisans, and experiences with multiple layouts

Automatic responsive grid layout with auto-fit/auto-fill for flexible column wrapping

Complete section wrapper combining Section, Header, and Grid in one convenient component

Interactive budget planning widget showing daily and trip totals by budget level

Consistent section titles and descriptions with optional subtitles and action links

Styled link component with animated arrow for CTAs throughout the site

Vertical list of items with icons and text for displaying location, hours, and other details

Large format featured content section with image and content side-by-side for hero sections

Large format card with image and content side-by-side, perfect for artisans and experiences

Newsletter subscription form with email input, validation, and branded styling

Subtle inline feedback collection widget for gathering user feedback, tips, corrections, and suggestions

Interactive map component with markers, filters, and location features for displaying geographic content

FDA-style nutrition facts label component with automatic daily value calculations

Interactive packing checklist component with essential, optional, and not-needed items for travel guides

Unified weather card component supporting both month and season modes with detailed metrics, recommendations, and expandable content

Comprehensive monthly weather comparison table with sorting, filtering by tourist season, color-coded temperature and rainfall, and CSV export

Real-time weather display component with API integration showing current conditions, metrics, and 5-day forecast preview

Comprehensive weather data widget with toggle between monthly (12 months) and seasonal (4 seasons) views, visual indicators, and detailed climate information

Print utilities demo using react-to-print with page breaks and global print CSS