Detail Page Bar
Back, title and action — the title appears once the heading scrolls away
Components
193 components, 20 of them built for Arabic alone.Every preview runs inside an isolated frame — what you see here is exactly what you will copy.
Finer filters
Every component — Framework · RTL · LTR · Dark · Accessibility · Verified.These are not filters because they do not distinguish: the gates enforce them across the whole library.
Greeting Bar with Account
The greeting follows the clock, and the balance can be hidden
Immersive Transparent Bar
Transparent over the cover, gaining a surface once it scrolls past
Reading Progress Bar
Progress computed from the scrollable height, not from scroll position alone
Bar with Inline Search
Search lives in the bar, with a cancel button that appears on focus
Bar with Segmented Filter
A segment that swaps content and recomputes the visible total
Savings Goal Card
Remaining amount and expected date derived from the monthly rate
Habit Card with Computed Streak
Streak and rate computed from the day log, never stored
Mini Player Card
A draggable scrubber, with time-left adjusted for playback speed
Story Cards with Progress Ring
A dashed ring built from the segment count; seen stories dim
Swipe-to-Reveal Card
A swipe reveals two actions and springs back below the threshold
Ticket Card with Code
Side notches, a generated barcode, and a countdown from the event date
Live Tracking Card
A vertical timeline with an ETA derived from the current stage
Flipping Bank Card
Two faces, with a masked number revealed briefly then re-hidden
Weather Card with Hourly Curve
The curve is generated from the values, scaled to their own min and max
Paired Floating Actions
A primary and a secondary action at different sizes and weights
Draggable FAB
Drags freely, snaps to the nearest edge, and never leaves the screen
Extended FAB that Collapses
Starts with a label and collapses to an icon on scroll
FAB that Morphs into a Panel
Expands from a circle into a form and returns on close
FAB with Progress Ring
An SVG ring computed from its own circumference, not a fixed width
Scroll-to-Top FAB
Appears after enough distance and returns smoothly — or instantly when motion is reduced
Speed Dial FAB
Opens named actions in sequence, closing on Escape and on the scrim
Checklist with Computed Progress
Completed items sink to the bottom; percentage and remaining are computed
Infinite Scroll List
An intersection observer loads the next batch and states clearly when it ends
Pull-to-Refresh List
Increasing resistance, a release threshold, and a spinner that announces state
Reorderable List
Drag by the handle, with an arrow-key path as the alternative
Sectioned List with Side Index
Sticky headers and a letter index that jumps to its section
List with Loading Skeleton
The skeleton matches the real content’s size so nothing shifts on arrival
Action Sheet
Grouped actions with the destructive one separated and marked
Irreversible Confirm Sheet
Requires typing a confirmation word before the button activates
Bottom Sheet with Detents
Third, half and full — it settles at the nearest detent on release
Filter Sheet
Changes stay pending until Apply — Reset restores the last applied state
Payment Method Sheet
Each method carries its fee, and the total recomputes on switch
Wheel Picker Sheet
Wheels snap on scroll and the value is read from the position
Share Sheet Grid
A row of people, a row of actions, and a copy-link that actually copies
Icon that Expands into Search
A small icon opens a full bar and closes it on Escape
Search with Filter Chips
Horizontally scrolling chips narrow the result, with a counter that follows
Sticky In-list Search
Sticks to the top of the list on scroll and reports the match count
Floating Search over a Map
Floats above the map with results sliding out beneath it
Search with Multiple Inputs
Type, scan a code, or use location — three ways into one result
Full-screen Search Sheet
Tapping the bar opens a search screen with history and trending
Search with Keyboard Suggestions
Live suggestions navigable with arrows and accepted with Enter
Tab Bar with Count Badges
The badge caps at 99+ and the total is summed from the conversations
Tab Bar with Centre Action
Four tabs with one raised primary action in the middle
Dot Page Indicator
Follows the horizontal swipe and jumps when a dot is pressed
Icon and Label Tab Bar
Five items maximum, each with an accessible name and a sliding indicator
Morphing Tab Bar
The active item expands to reveal its label; the rest stay icons
Floating Pill Tab Bar
Floats above content and hides when scrolling down
Quadruple Name Field
Official Gulf names have four parts, not two
Contact Section
A multi-field form validating on blur, with an error summary
Call-to-Action Section
One field, one button, and validation only after the field is left
FAQ Section
An accordion built on native details — works with JavaScript off
Full Footer
Link columns, a newsletter, and a copyright year computed rather than typed
Hero Section
Headline, promise, two actions and one trust signal in a single visual order
Client Logo Marquee
An endless strip that stops completely when motion is reduced
Pricing with Billing Toggle
The annual saving is computed from both prices, never hand-written
Animated Stats Band
Numbers count up on entry — and appear complete when motion is reduced
Numbered Steps
A horizontal path whose connector stops at the last step instead of overshooting
Copy Button with Confirmation
Actually copies, with a fallback when clipboard permission is unavailable
Hold-to-Delete
The delete completes after a sustained press and aborts on release
Icon Buttons with Tooltips
Each has an accessible name, and the tooltip shows on focus, not hover alone
Async Loading Button
Blocks the double click and holds its width while pending
Magnetic Button
Leans toward the pointer within range, and stops when motion is reduced
Progress-in-Button
Progress lives inside the button, and the upload can be cancelled mid-flight
Segmented Control
Single choice with a sliding indicator measured from the active segment
Expanding Share Buttons
One button expands into options, with a counter that actually increments
Split Button
The default action is one click; its alternatives sit behind an arrow
Quantity Stepper
Respects stock and minimum, recomputing the line total instantly
Toggle Switches
State announced to screen readers, with computed dependency between switches
Doctor Card with Slots
Booked ratio and open slots computed from the schedule
Course Card with Progress
Percentage and time left derived from the lesson list
Flight Card
Duration computed from both times including the timezone offset
Media Card
Aspect ratio preserved, duration formatted from raw seconds
Order Card with Timeline
Progress derived from the current stage within the stage list
Product Card
The discount is computed from both prices, never hand-written
Ratings Card
The average is computed from the star distribution, not stored
Team Card with Capacity
Overflow count and capacity load both computed
Cart with Free-shipping Threshold
The gap to free shipping is computed, never hand-written
Coupon with Three Discount Types
Percentage, fixed amount or free shipping — each with its own cap
Card Input with Luhn Check
Validated with the Luhn algorithm; the network is inferred from its prefix
Receipt with Torn Edge
Sequential number, VAT and a verification code — shaped like a real receipt
Refund Request with Computed Amount
The refunded amount computed after restocking and non-refundable shipping
Shipping with Computed Dates
Arrival computed in business days, skipping Friday and Saturday
Order Tracking Timeline
A vertical trail with real timestamps; what is ahead is estimated, not asserted
Bundle Upsell with Computed Saving
The saving is computed from the price difference and updates with each pick
Four-level Alert Banners
Colour never carries the meaning alone — each level has an icon and a role
Type-to-Confirm Delete
The button unlocks only when the resource name is typed exactly
First-run Empty State
A deliberate blank: explains the value and offers one step
Error with Backoff Retry
The wait doubles with each attempt, and it is capped
Inline Field Validation
An error bound to its field via aria-describedby, announced exactly once
No Results with an Exit
Shows the filters that narrowed the result and lets you drop them one by one
Offline with a Queue
Holds what could not be sent and flushes it when the network returns
Multi-file Progress
An overall percentage weighted by size, not by file count
Loading Skeleton
Reserves the real content’s box so the page does not jump when it arrives
Success with a Next Step
Does not stop at “done” — it gives the reference and what comes next
Semicircular Gauge
An arc whose angle comes from the ratio and whose length comes from the radius
Countdown from a Real Interval
Computes the gap from a real date, so it never drifts
Deviation from Target
Bars that grow out of zero in both directions by the sign of the gap
Conversion Funnel
Each stage carries two ratios: from the previous stage and from the first
Weekly Heatmap
Colour derived from the actual range — not from hardcoded thresholds
Hijri Date Picker
Hijri and Gregorian together, one tap to switch
National ID / Iqama Field
Tells citizen from resident by the first digit, and validates the checksum
Navbar with Account and Alerts
Two separate menus — opening one closes the other
Navbar with Announcement Bar
A promo strip above with a real timer that stays dismissed
Compact App Bar
The slimmest size, with a project switcher and a command key
Navbar with Breadcrumb
A hierarchical trail whose separators mirror with direction
Classic Navbar
Logo, links and one action — the baseline that always works
Navbar with Mega Menu
A multi-column panel that closes on Escape and outside click
Mobile Navbar with Sheet
A hamburger that opens a full sheet and traps focus
Navbar with Centre Search
The search expands on focus without shifting the layout
Navbar with Secondary Tabs
Two rows: identity above, tabs below with a sliding indicator
Transparent Navbar that Fills
Transparent over the hero, gains a background on scroll
Infinite Scroll That Ends
An observer that fetches near the edge and stops with an announcement instead of spinning forever
Load More with Honest Count
It announces what remains — not what loaded — and retires at the end instead of staying a dead button
Windowed Pagination
A page-number window whose width never changes as the reader moves
Autocomplete Search
Suggests, navigates by arrows, and remembers your last searches
Search with Compound Filters
A term plus conditions — each filter shown as a chip you can remove
Typo-Tolerant Search
Finds the match despite a typo, and suggests “did you mean?”
Radius Search
Distance computed with haversine, not raw coordinate differences
Grouped Global Search
Results from several sources, each under its own heading
Instant Search with Highlight
Filters as you type and highlights the match in the original text
Paginated Search
Pages computed from the result count, resetting on every new query
Search with Price Range
Two handles that cannot cross, with results recomputed instantly
Search with Recent History
Stores recent searches locally and offers them before you type
Field-scoped Search
Restricts the query to one field instead of every field
In-table Search
Highlights inside cells, counts rows and sums only what is visible
Tag-based Search
Each tag is a condition — results are their intersection, not their union
Sidebar with Live Badges
Counters that change and announce themselves to screen readers
Sidebar with Command Palette
Ctrl+K opens a search that jumps anywhere by keyboard alone
Icon Rail with Tooltips
As narrow as it gets — the label appears on hover and focus
Sidebar with Pinned Items
Pin what you use daily to the top — and it stays pinned
Sidebar with User Menu
A menu that closes on outside click and on Escape
Sidebar with Progress Meters
Each section carries a computed meter, announced to screen readers
Split Rail with Context Panel
An icon column that swaps the contents of the panel beside it
Sidebar with Workspace Switcher
Switching the client swaps the whole navigation
National Address Sign-up
Postal code, building number and additional number — each with its correct length
Sign-up with Age Check
Age computed from the full date difference, not by subtracting years
Business Sign-up with CR Number
Validates the commercial registration and the VAT number together
Sign-up with Layered Consent
Required and optional consents, with a genuinely tri-state “select all”
Bank Account Sign-up
IBAN verified with the full mod-97 checksum, not just its length
Join by Team Invite
The invite code resolves both the team and the role
OTP Code Entry
Accepts a pasted code, moves back on delete, and re-sends on a timer
Sign-up with Password Strength
Strength computed from variety and length together — not length alone
Phone Sign-up
Accepts Saudi and Jordanian numbers and normalises the international form
Sign-up with Providers
Provider buttons, a divider and an email fallback — in correct focus order
Multi-step Sign-up
No step advances before the previous one is valid — progress is computed
Username with Live Availability
Checks after typing stops and suggests alternatives on collision
Period Comparison
Current against previous — the delta computed both ways
Progress Ring
A share of a target — the ring’s circumference computed from its radius
Stat with Sparkline
The curve is drawn from the data itself — not a static image
Comparison Table
Each feature row is a header, and the highlighted column is announced, not just coloured
Density and Column Toggles
Three densities and hideable columns, with the choice remembered
Inline Cell Editing
Saves on Enter, reverts on Escape, and recomputes immediately
Table with Expandable Rows
Details open under their own row, correctly wired with aria
Table with Combined Filters
Text search plus two selects — intersected, with a total that follows
Grouped Table with Subtotals
Subtotals and the grand total computed from the rows, never typed
Table that Becomes Cards
On narrow screens it becomes cards, each field carrying its own label
Table with Bulk Selection
A genuinely tri-state “select all”, with actions that state their count
Type-aware Sortable Table
Numbers compare numerically and Arabic by its own collation — never as plain text
Sticky Header and First Column
Header sticks vertically, first column horizontally, and the corner above both
Tax Invoice
Arabic tax-invoice layout with line items and 15% VAT
No results. Try a shorter word.