Learn how to use RSL components with the JSON Layout API
All RSL components can be used with the JSON Layout API for declarative, programmatic UI generation. Each component automatically initializes after rendering, providing a seamless integration experience.
Note: These examples demonstrate the JavaScript API approach. Each example shows how to create components programmatically using JSON configuration instead of writing HTML manually.
Stunning hero sections with gradient backgrounds, parallax effects, overlays, and animated content. Fully responsive and accessible.
Custom select dropdowns with search, multi-select, and chip display. Fully accessible and keyboard navigable.
Dialog windows, modals, and overlays with flexible content and actions. Accessible focus trapping and animations.
Contextual tooltips with positioning, variants, and sizes for enhanced user guidance. Smart auto-positioning near viewport edges.
Collapsible content sections with column-based and classic styles. Single or multi-open modes with full keyboard navigation.
Accessible tabbed interfaces for organizing related content. Full keyboard navigation, ARIA support, and skip links for screen readers.
Non-blocking notifications and alerts for user feedback.
Pure SVG charts with zero dependencies. Bar, line, area, pie, doughnut, and sparklines with full accessibility support.
Premium dashboard KPI cards with trends, sparklines, progress bars, and color schemes. Perfect for analytics dashboards.
Lightweight statistics for landing pages and marketing sections. Count-up animations, multiple variants (default, compact, inline, featured, card), and FilterBus integration.
Image and content carousels with auto-play, navigation controls, and keyboard support.
Masonry-style image gallery with category filtering, lightbox viewer, and full keyboard accessibility.
Slide-out panels for navigation menus, filters, and additional content. Accessible and responsive.
Modal alert, confirm, and prompt dialogs with focus trapping, scroll locking, and full keyboard navigation support.
Dynamic announcement bars with auto-rotation, priority badges, navigation controls, and full screen reader support.
Responsive navigation with dropdown menus, keyboard navigation, mobile hamburger menu, and multiple layout options.
Client-side table pagination with keyboard-accessible controls, ARIA support, and automatic page state management.
Automatic sidebar layouts with left, right, or dual sidebars. Slot-based architecture with optional full-width sections.
Row-based card height equalization with automatic image loading detection. Creates uniform card grids with aligned headers.
Accessible image thumbnails with overlay buttons, modal support, and automatic ARIA labels. Perfect for galleries and portfolios.
Rich content popovers with intelligent positioning, click/hover triggers, and automatic boundary detection for interactive overlays.
Navigation breadcrumb trails with icons, compact variants, and icon-only mode for hierarchical page navigation.
Animated loading placeholders with multiple shapes (text, card, list), animation variants (shimmer, pulse, wave), and dark mode support.
Complete form builder with field tiles, toggles, sliders, chips, choice cards, custom selects, file uploads, and fieldset groups. Full keyboard navigation and dark mode support.
Contextual alert messages with auto-dismiss timers, progress indicators, and multiple variants for success, warning, danger, and info states.
Three responsive table variants: scrollable (horizontal scroll), responsive (stacked mobile), and responsive-card (card layout on mobile).
Flexible grid layouts with responsive breakpoints, gap control, column spanning, auto-fit/auto-fill, named grid areas, and nested grids.
Responsive iframe embedding with aspect ratio preservation, lazy loading, skip links for keyboard accessibility, and features for videos, maps, and embedded content.
Responsive images with utility classes for size, shape, borders, shadows, grayscale effects, aspect ratios, and captions.
Masonry-style layouts with automatic height balancing. Items are placed in the shortest column for visually harmonious layouts.
Status indicators, labels, counters, and notification badges with colors, styles, shapes, icons, animations, and interactive features.
Linear, circular, gauge, and step progress indicators with thresholds, milestones, animations, gradients, and data-driven templates.
Feature-rich data tables with sorting, filtering, pagination, column resizing, bulk actions, saved views, and CSV/Excel export.
Interactive project timelines with drag-drop editing, dependencies, milestones, progress tracking, and export to PNG/CSV/JSON.
Accessible date picker with single, range, and multiple selection modes. Supports presets, constraints, disabled days, and dual calendar view.
Accessible time picker with clock dial, quick presets, and range mode. 12/24-hour formats, time constraints, and FilterBus integration.
ADA-compliant calendar with day, week, month, and year views. Event management, categories, FilterBus integration, and full keyboard navigation.
Global filter system with FilterBus pub/sub architecture. Pills, buttons, chips, dropdown, and search styles with multi-select support.
Accessible icon picker with Font Awesome and RSL icon support. Search, categories, recent icons, and full keyboard navigation.
Accessible star rating with input, display, and filter modes. Half-star support, multiple icons, custom colors, FilterBus integration.
Customer testimonials with variants (card, minimal, featured, bubble), star ratings, avatars, accent colors, and FilterBus integration.
Premium pricing tables with monthly/annual toggle, feature comparison, badges, tooltips, and multiple variants (cards, comparison, compact).
Accessible video player supporting YouTube, Vimeo, and self-hosted videos. Custom controls, keyboard navigation, aspect ratios, and size variants.
Premium loading indicators with 7 spinner variants, 2 progress types, 5 display modes, 4 sizes, and 7 colors. Full accessibility with progress tracking and state management.
Premium sticky positioning with preset variants (header, sidebar, toc), visual effects, scroll direction detection, stacking groups, and responsive breakpoints.
Chronological event displays with vertical/horizontal orientations, card variants, collapsible events, status indicators, and scroll animations.