An RTL-first component library.
Built on semantic tokens, so re-theming never touches a component. Every component uses CSS logical properties and is verified in both writing directions — flip the toggle in the header on any page.
- Components ready
- 98/98
- Foundations
- 8
- Directions supported
- 2
Foundations
Colors
Primitive ramps, semantic roles, and how to re-theme.
Typography
The type scale, weights, and usage rules.
Spacing
The 4px-based spacing scale and layout rhythm.
Radius
Corner radii, derived from one base value.
Elevation
Shadow and surface levels in light and dark.
Motion
Duration and easing tokens, and reduced-motion.
Icons
Icon sizing, stroke, alignment, and RTL mirroring.
Direction
How LTR/RTL works across the whole system.
Form
Triggers an action.
Joins related buttons into one control.
Names a form control.
Label, control, description, and error as one unit.
Single-line text entry.
Input with addons, prefixes, and suffixes.
One-time code entry.
Multi-line text entry.
Binary or indeterminate choice.
One choice from a set.
Immediate on/off toggle.
Two-state button.
Single or multiple selection from toggles.
Select a value from a range.
Platform select, for long or mobile-first lists.
Custom-styled single select.
Searchable select.
Date grid.
Calendar in a popover.
Select many options as removable tags.
Star rating, display and input.
Dismissible tags with free entry.
OAuth sign-in buttons.
Pick a colour with swatches and input.
Drag-and-drop upload zone.
Formatted text entry with a toolbar.
Display
Heading, Text, Code, List, Blockquote.
Short status or metadata label.
User image with fallback.
Grouped content surface.
Divides content.
Loading placeholder.
Indeterminate loading.
Determinate loading.
Keyboard key.
Empty state.
Generic list row.
Inline message.
Constrains content to a ratio.
Annotates a point on a surface.
File attachment chip.
An icon on a styled tile.
Stat card with delta and trend.
Code with a copy button.
Generate a themed QR code.
Media player with themed controls.
Overlay
Modal window.
Modal that interrupts for confirmation.
Panel anchored to an edge.
Draggable bottom panel.
Floating content anchored to a trigger.
Short hint on hover or focus.
Rich preview on hover.
Menu from a trigger.
Menu on right-click.
Application menu bar.
Command palette.
Transient notification.
Navigation & layout
Vertically stacked collapsible sections.
Show and hide a region.
Switch between panels.
Path to the current page.
Navigate paged content.
Site navigation with panels.
Collapsible application sidebar.
Draggable split panes.
Styled cross-browser scrolling.
Horizontal slide rail.
Data
App patterns
Title, meta, and actions atop a page.
Heading row with supporting actions.
Search, filters, and view controls in one row.
Timeline of events with actors and times.
Multi-step wizard indicator.
Nested, keyboard-navigable hierarchy.
Inbox-style notification list.
Messaging
Marketing blocks
Dismissible announcement bar.
Marketing navbar with mobile menu.
Headline, sub, and CTA pair.
Centred intro for a page or section.
Feature grid with featured icons.
Big-number stats band.
Logo cloud.
Quote cards with ratings.
Tiers with a billing toggle.
Accordion of common questions.
Full-bleed call to action.
Email-capture band.
Post teaser cards.
People grid with avatars.
Open-roles list.
Info column and message form.
Multi-column site footer.