Components

Site-wide panel for accessibility presets, typography tuning, and visual filters

Expandable content panels with nested group support

Contextual messages for status, warnings, and notifications

Type-ahead search with filtered suggestions

Profile images, initials, and group stacks

Titled content grouping primitive for sub-sections inside a section body

Hierarchical path showing the current page location

Interactive actions with multiple variants, sizes, and states

Versatile content containers for articles, profiles, and actions

Lightweight SVG charts: bar, line, pie, and donut

Multi-select toggles for options and preferences

Compact labels for tags, filters, and selections

Real-time clock with Hijri/Gregorian date

Formatted code blocks with syntax highlighting and copy

Dashed stand-in marking a region a real component will replace

Toggle between content sections within the same space on the screen

Privacy-compliant cookie management banner

Click-disabled countdown button for resend, retry, and rate-limited actions

One-click clipboard copy with checkmark feedback and screen reader announcement

Scroll-triggered animated counters that count up to a target value

SAR and international currency symbols appended automatically via data attribute

Hijri/Gregorian calendar with dual date conversion

Structured key-value pairs in grid or list layouts

Government authority verification panel

Horizontal or vertical rule with optional centered label

Critical CSS, deferred bundles, and the inline gate every page loads in its head

Collapsible navigation lists with accordion groups

Toggle-activated overlay for actions and navigation

Rich text field that submits clean NDS markup, converting Word, Google Docs, and web pastes and inserting NDS components as blocks

Parent-adaptive placeholder for containers with no content

Show more/less toggle for long content blocks

Declarative CSV, Excel, and PDF downloads from any table, card list, or marked-up container

Decorative icon containers with shape and color options

Semantic status icons for success, error, and info

Drag-and-drop file input with preview and validation

Applied filters with search, URL sync, and remote data

Quick alignment, direction, and wrapping with custom-property overrides

FAB that pins to a viewport corner and stacks with others

Multi-column footer with light and green variants

Responsive column system with flexible breakpoints

Top bar and primary navigation shell with mega menus and mobile drawer

Full-width page banners with slider and call-to-action

Visibility utilities: the hidden attribute honored everywhere and band-exact responsive hiding with data-hidden

The HugeIcons Stroke Rounded font for content plus a curated inline SVG set for components and chrome, with sizing, color, and license guidance

IPV fullscreen image preview with zoom and navigation

Inline navigation with color variants and automatic external-link detection

Spinners and skeleton placeholders for loading states

Dashboard tile pairing a key statistic with an inline sparkline

Focused dialog overlays for confirmations and forms

Multi-option select over a native checkbox group: removable chips, JSON-populated options, staged or instant commit

Numeric field with increment and decrement controls, min/max, and step

Locale-aware thousand separators for any number on the page

Segmented one-time password fields with auto-advance

Page-by-page navigation for large data sets

Content-agnostic surface that slides in from any edge of the viewport

Identity block with avatar, name, role, and optional action row

Visual indicators for task completion and loading

Default styling for classless flowing content from editors and CMSs

Semantic quotation block with optional title and author attribution

Single-choice selection within a group

Star-based display and input for user ratings

Fetch wrapper with a timeout, a response size cap, and errors you can branch on

Bundled JSON dataset of 132 Saudi Arabian cities with bilingual names, drop-in for autocomplete and address flows

Overflow wrapper with edge mask-fade and sticky show-more button

Page content sections with head, body, and action areas

Selected-items counter for tables, card grids, and checkbox lists, with a records-line swap while a selection is active

Native dropdown menus for choosing from a list

Social share dropmenu for X, LinkedIn, WhatsApp, and copy link

Companion column for service details, progress, and in-page navigation

Collapsible nested sidebar navigation

Numeric range input with single-thumb and dual-thumb modes for picking a value or a min–max span

DOM-reorder engine for lists, grids, and tables with type auto-detect and URL sync

Sequential step indicators for multi-stage workflows

Touch-enabled carousel for images and content slides

Binary on/off toggles for settings and preferences

Data grids with sorting, pagination, and expandable rows

Switchable content panels with horizontal tab navigation

Free-text tags committed as removable chips while typing, posted natively as an array

Small labels for categorization and metadata

Single-line fields with labels, icons, and validation

Resizable multi-line text fields

Light and dark mode, plus brand theming: generate a full palette from OKLCH seed colours, or override the design tokens with a stylesheet theme

Auto-populated in-page table of contents with active-section tracking

Every CSS custom property in the system: palette, primitive scales, semantic meanings, and component dials to reference and override

Controls bar above a table, list, or grid: result counts and applied filters lead, export and actions trail

Click-activated balloon for contextual help next to a term or field

Government branding bar with date, weather, and dark mode toggle

Line-clamped overflow with expand/collapse toggle

Satisfaction surveys and inline rating forms

Voice-to-text button that dictates into a text field, with Arabic/English auto-detection

Live weather display from GPS coordinates