Components

Explore RSL components with interactive examples and API documentation

About These Examples

These are component demonstrations showcasing how RSL components work in real-world scenarios. Each example page is complete and ready to explore.

Looking for full templates? Check out Templates.

Core Features

Density Mode

Adaptive density system that adjusts spacing based on input type (touch vs mouse)

Density Mode API

Theme Toggle

Dark/light mode toggle with localStorage persistence

Theme Toggle API

Accessibility Widget

Floating accessibility panel with font size, contrast, and TTS controls

Accessibility API

Feedback

Alerts

Contextual feedback messages for user actions

Alerts API

Announcements

Two-mode announcement bar with panel view

Announcements API

Inlay Alerts

Inline alert messages with expand/collapse

Inlay Alerts API

Toast

Temporary notification messages

Toast API

Modal

Dialog boxes and overlays for important content

Modal API

Popover

Contextual information tooltips and popovers

Popover API

Progress Bar

Linear, circular, gauge, and step progress indicators

Progress Bar API

Tooltip

Accessible tooltips with smart positioning

Tooltip API

Star Rating

Accessible star rating for reviews and feedback

Star Rating API

Testimonial

Customer quotes with ratings and slideshow

Testimonial API

Pricing Table

Responsive pricing tiers with billing toggle

Pricing Table API

Video Player

Accessible video player with YouTube, Vimeo, and MP4 support

Video Player API

Data Display

Cards

Flexible content containers with headers and footers

Cards API

Carousel

Image and content sliders with navigation

Carousel API

Gallery

Masonry photo gallery with filtering, lightbox viewer, and full keyboard/screen reader accessibility

Gallery API

Accordion

Collapsible content panels for FAQs and menus

Accordion API

Off-Canvas

Slide-in sidebar panel for navigation and content

Off-Canvas API

Badge

Status indicators, labels, counters, and notification badges

Badge API

Charts

Pure SVG charts - bar, line, area, pie, doughnut, and sparklines with zero dependencies

Charts API

KPI Cards

Premium dashboard KPI cards with trends, sparklines, and animations

KPI Cards API

Stats

Lightweight statistics display with count-up animations for landing pages

Stats API

Smart Table

Feature-rich data tables with sorting, filtering, pagination, selection, and export

Smart Table API

Gantt Chart

Interactive project timeline with drag-drop, dependencies, milestones, and export

Gantt Chart API

Calendar

Full page ADA-compliant calendar with day, week, month, year views and event management

Calendar API

Timeline

Chronological event display with multiple variants, orientations, and full accessibility

Timeline API

Forms

Form Elements

Input fields, textareas, selects, and checkboxes

Form Elements API

Select

Custom select with single/multi-select, search, and icons

Select API

Date Picker

Fully accessible date picker with single, range, and multiple date modes

Date Picker API

Time Picker

Premium time selection with clock dial, list mode, presets, and full keyboard navigation

Time Picker API

Color Picker

Accessible color picker with WCAG contrast checking and smart suggestions

Color Picker API

Icon Picker

Unified icon selection from Font Awesome and RSL Icons with search and categories

Icon Picker API

Text Editor

Fully accessible WYSIWYG rich text editor with keyboard navigation and smart paste

Text Editor API

Filter

Global filtering with FilterBus pub/sub, multiple UI styles, and cross-component communication

Filter API

Buttons

Button styles, sizes, and states

Buttons API

Media

Theme Toggle

Light and dark mode theme switching

Theme Toggle API

Animate on Scroll

Scroll-triggered animations with data attributes for fade, slide, zoom, and spin effects

Examples API

Performance Optimizer

Improve page load speeds with resource hints, preconnection, and lazy loading. Track performance metrics including FCP, TTFB, and page load time.

Examples API

Thumbnail

Accessible-first image gallery component with auto-generated ARIA labels and ALT tags. Features customizable overlay colors, opacity levels, one or two button configurations, and modal integration for viewing enlarged images.

Examples API

Skeleton Loader

Animated placeholders for better loading states

Skeleton Loader API

Loader

Premium loading spinners with progress tracking and multiple variants

Loader API

Sticky Elements

Premium sticky positioning system with visual state indicators, accessibility features, and responsive breakpoints. Supports stacked headers, sidebar navigation, TOC, and scroll-direction visibility.

Sticky Elements API

Tooltip

Accessible tooltips with smart positioning

Tooltip API

Accessibility Widget

Comprehensive accessibility overlay with text adjustments, visual modes, reading aids, and motion controls - all saved to localStorage

Accessibility Widget API

RSL Icons

300+ zero-dependency SVG icons with size, color, animation, and rotation variants. Includes migration script from FontAwesome.

Icons API

Hero

Premium hero sections with parallax scrolling, typewriter effects, animated gradients, and scroll indicators. Supports image, video, and gradient backgrounds with multiple size and layout options.

Examples API

Layout Features

Grid System

Responsive slot-based layout system

Grid System API

Balanced Layout

Smart sections alternative to grid

Balanced Layout API

Sidebar

Float-based sidebar layouts

Sidebar API

Tables

Responsive table patterns and data display

Tables API

Images

Responsive images with max-width utilities

Images API

iFrames

Responsive iframe embedding

iFrames API

Scroll Progress

Visual scroll progress indicator

Scroll Progress API