All Components
74 components, each with markup, styling, and JavaScript behavior.
Accordion
Expandable content panels with nested group support
Alert
Contextual messages for status, warnings, and notifications
Avatar
Profile images, initials, and group stacks
Breadcrumb
Hierarchical path showing the current page location
Buttons
Interactive actions with multiple variants, sizes, and states
Cards
Versatile content containers for articles, profiles, and actions
Chips
Compact labels for tags, filters, and selections
Code
Formatted code blocks with syntax highlighting and copy
Cooldown Button
Click-disabled countdown button for resend, retry, and rate-limited actions
Dark Mode
Full-page light and dark theme toggle with localStorage persistence and circular reveal animation
Definition List
Structured key-value pairs in grid or list layouts
Drawer
Collapsible navigation lists with accordion groups
Dropmenu
Toggle-activated overlay for actions and navigation
Empty
Parent-adaptive placeholder for containers with no content
Featured Icons
Decorative icon containers with shape and color options
Feedback Icons
Semantic status icons for success, error, and info
Hero
Full-width page banners with slider and call-to-action
Link
Inline navigation with color variants and automatic external-link detection
Loading
Spinners and skeleton placeholders for loading states
Metric
Dashboard tile pairing a key statistic with an inline sparkline
Modal
Focused dialog overlays for confirmations and forms
Pagination
Page-by-page navigation for large data sets
Persona
Identity block with avatar, name, role, and optional action row
Progress
Visual indicators for task completion and loading
Quote
Semantic quotation block with optional title and author attribution
Rating
Star-based display and input for user ratings
Scroll More
Overflow wrapper with edge mask-fade and sticky show-more button
Stepper
Sequential step indicators for multi-stage workflows
Swiper
Touch-enabled carousel for images and content slides
Tabs
Switchable content panels with horizontal tab navigation
Tags
Small labels for categorization and metadata
TOC
Auto-populated in-page table of contents with active-section tracking
Tooltip
Click-activated balloon for contextual help next to a term or field
Text Inputs
Single-line fields with labels, icons, and validation
Selects
Native dropdown menus for choosing from a list
Textareas
Resizable multi-line text fields
Number Input
Numeric field with increment and decrement controls, min/max, and step
Checkbox
Multi-select toggles for options and preferences
Radio
Single-choice selection within a group
Switch
Binary on/off toggles for settings and preferences
OTP Input
Segmented one-time password fields with auto-advance
File Upload
Drag-and-drop file input with preview and validation
Autocomplete
Type-ahead search with filtered suggestions
Multiselect
Multi-option select with grouped checkboxes, draft/apply commit, and removable chips
Filter
Applied filters with search, URL sync, and remote data
User Feedback
Satisfaction surveys and inline rating forms
Tables
Data grids with sorting, pagination, and expandable rows
Sort
DOM-reorder engine for lists, grids, and tables with type auto-detect and URL sync
Chart
Lightweight SVG charts: bar, line, pie, and donut
Section
Page content sections with head, body, and action areas
Grid
Responsive column system with flexible breakpoints
Block
Titled content grouping primitive for sub-sections inside a section body
Copy
One-click clipboard copy with checkmark feedback and screen reader announcement
Truncate Text
Line-clamped overflow with expand/collapse toggle
Divider
Horizontal or vertical rule with optional centered label
Expandable Content
Show more/less toggle for long content blocks
Flex
Quick alignment, direction, and wrapping with custom-property overrides
Saudi Cities
Bundled JSON dataset of 132 Saudi Arabian cities with bilingual names, drop-in for autocomplete and address flows
Numbers
Locale-aware thousand separators for any number on the page
Counter Animation
Scroll-triggered animated counters that count up to a target value
Currency
SAR and international currency symbols appended automatically via data attribute
Share
Social share dropmenu for X, LinkedIn, WhatsApp, and copy link
Top Bar
Government branding bar with date, weather, and dark mode toggle
Main Navigation
Primary site navigation with mega menu and mobile drawer
DGA Digital Stamp
Government authority verification panel
Side Menu
Collapsible nested sidebar navigation
Side Info
Companion column for service details, progress, and in-page navigation
Footer
Multi-column footer with light and green variants
Date Picker
Hijri/Gregorian calendar with dual date conversion
Speech Recognition
Voice input supporting Arabic and English
Weather Widget
Live weather display from GPS coordinates
Clock
Real-time clock with Hijri/Gregorian date
Cookie Consent
Privacy-compliant cookie management banner
Image Popup Viewer
Fullscreen image preview with zoom and navigation