# Oratiq Design System > An RTL-first, token-driven component library for Next.js 16, React 19, and Tailwind CSS v4. > 98 components, built on Radix primitives. ## Rules - Components read semantic tokens only (--primary, --muted, --destructive). Never reference a primitive ramp (--brand-500, --neutral-800) or a hex value in application code. - Use CSS logical properties everywhere: ms-/me-, ps-/pe-, start-/end-, text-start/text-end, rounded-s-/rounded-e-, border-s/border-e. Never ml-, pr-, left-, right-, text-left, or text-right. - Mirror directional glyphs under RTL with the .rtl-flip utility: chevrons, arrows, trend lines. Never mirror clocks, checkmarks, logos, magnifiers, media controls, or anything containing numerals. - Wrap inherently-LTR strings in : phone numbers, IDs, URLs, version strings, keyboard shortcuts, one-time codes. - Merge classes with cn() from lib/utils. It registers the custom scales with tailwind-merge; using twMerge directly silently drops colours. - Wrap the app in from components/providers. It supplies theme, writing direction, tooltip, and toast context. - Icon-only controls require an aria-label describing the action, not the glyph. ## Theming Override the semantic roles in :root and .dark. Never edit a component to change a colour. All radii derive from --radius via calc(), so one value sets the corner language. ## Foundations - [Colors](/design-library/foundations/colors): Primitive ramps, semantic roles, and how to re-theme. - [Typography](/design-library/foundations/typography): The type scale, weights, and usage rules. - [Spacing](/design-library/foundations/spacing): The 4px-based spacing scale and layout rhythm. - [Radius](/design-library/foundations/radius): Corner radii, derived from one base value. - [Elevation](/design-library/foundations/elevation): Shadow and surface levels in light and dark. - [Motion](/design-library/foundations/motion): Duration and easing tokens, and reduced-motion. - [Icons](/design-library/foundations/icons): Icon sizing, stroke, alignment, and RTL mirroring. - [Direction](/design-library/foundations/direction): How LTR/RTL works across the whole system. ## Form - [Button](/design-library/components/button): Triggers an action. - [Button Group](/design-library/components/button-group): Joins related buttons into one control. - [Label](/design-library/components/label): Names a form control. Requires: radix-ui. - [Field](/design-library/components/field): Label, control, description, and error as one unit. - [Input](/design-library/components/input): Single-line text entry. - [Input Group](/design-library/components/input-group): Input with addons, prefixes, and suffixes. - [Input OTP](/design-library/components/input-otp): One-time code entry. - [Textarea](/design-library/components/textarea): Multi-line text entry. - [Checkbox](/design-library/components/checkbox): Binary or indeterminate choice. Requires: radix-ui. - [Radio Group](/design-library/components/radio-group): One choice from a set. Requires: radix-ui. - [Switch](/design-library/components/switch): Immediate on/off toggle. Requires: radix-ui. - [Toggle](/design-library/components/toggle): Two-state button. Requires: radix-ui. - [Toggle Group](/design-library/components/toggle-group): Single or multiple selection from toggles. Requires: radix-ui. - [Slider](/design-library/components/slider): Select a value from a range. Requires: radix-ui. - [Native Select](/design-library/components/native-select): Platform select, for long or mobile-first lists. - [Select](/design-library/components/select): Custom-styled single select. Requires: radix-ui. - [Combobox](/design-library/components/combobox): Searchable select. Requires: cmdk. - [Calendar](/design-library/components/calendar): Date grid. Requires: react-day-picker. - [Date Picker](/design-library/components/date-picker): Calendar in a popover. - [Multi Select](/design-library/components/multi-select): Select many options as removable tags. Requires: cmdk. - [Rating](/design-library/components/rating): Star rating, display and input. - [Tag Input](/design-library/components/tag-input): Dismissible tags with free entry. - [Social Buttons](/design-library/components/social-buttons): OAuth sign-in buttons. - [Color Picker](/design-library/components/color-picker): Pick a colour with swatches and input. - [File Uploader](/design-library/components/file-uploader): Drag-and-drop upload zone. - [Rich Text Editor](/design-library/components/rich-text-editor): Formatted text entry with a toolbar. ## Display - [Typography](/design-library/components/typography-component): Heading, Text, Code, List, Blockquote. - [Badge](/design-library/components/badge): Short status or metadata label. - [Avatar](/design-library/components/avatar): User image with fallback. Requires: radix-ui. - [Card](/design-library/components/card): Grouped content surface. - [Separator](/design-library/components/separator): Divides content. Requires: radix-ui. - [Skeleton](/design-library/components/skeleton): Loading placeholder. - [Spinner](/design-library/components/spinner): Indeterminate loading. - [Progress](/design-library/components/progress): Determinate loading. Requires: radix-ui. - [Kbd](/design-library/components/kbd): Keyboard key. - [Empty](/design-library/components/empty): Empty state. - [Item](/design-library/components/item): Generic list row. - [Alert](/design-library/components/alert): Inline message. - [Aspect Ratio](/design-library/components/aspect-ratio): Constrains content to a ratio. Requires: radix-ui. - [Marker](/design-library/components/marker): Annotates a point on a surface. - [Attachment](/design-library/components/attachment): File attachment chip. - [Featured Icon](/design-library/components/featured-icon): An icon on a styled tile. - [Metric](/design-library/components/metric): Stat card with delta and trend. - [Code Snippet](/design-library/components/code-snippet): Code with a copy button. - [QR Code](/design-library/components/qr-code): Generate a themed QR code. - [Video Player](/design-library/components/video-player): Media player with themed controls. ## Overlay - [Dialog](/design-library/components/dialog): Modal window. Requires: radix-ui. - [Alert Dialog](/design-library/components/alert-dialog): Modal that interrupts for confirmation. Requires: radix-ui. - [Sheet](/design-library/components/sheet): Panel anchored to an edge. Requires: radix-ui. - [Drawer](/design-library/components/drawer): Draggable bottom panel. Requires: vaul. - [Popover](/design-library/components/popover): Floating content anchored to a trigger. Requires: radix-ui. - [Tooltip](/design-library/components/tooltip): Short hint on hover or focus. Requires: radix-ui. - [Hover Card](/design-library/components/hover-card): Rich preview on hover. Requires: radix-ui. - [Dropdown Menu](/design-library/components/dropdown-menu): Menu from a trigger. Requires: radix-ui. - [Context Menu](/design-library/components/context-menu): Menu on right-click. Requires: radix-ui. - [Menubar](/design-library/components/menubar): Application menu bar. Requires: radix-ui. - [Command](/design-library/components/command): Command palette. Requires: cmdk. - [Toast](/design-library/components/toast): Transient notification. Requires: sonner. ## Navigation & layout - [Accordion](/design-library/components/accordion): Vertically stacked collapsible sections. Requires: radix-ui. - [Collapsible](/design-library/components/collapsible): Show and hide a region. Requires: radix-ui. - [Tabs](/design-library/components/tabs): Switch between panels. Requires: radix-ui. - [Breadcrumb](/design-library/components/breadcrumb): Path to the current page. - [Pagination](/design-library/components/pagination): Navigate paged content. - [Navigation Menu](/design-library/components/navigation-menu): Site navigation with panels. Requires: radix-ui. - [Sidebar](/design-library/components/sidebar): Collapsible application sidebar. - [Resizable](/design-library/components/resizable): Draggable split panes. Requires: react-resizable-panels. - [Scroll Area](/design-library/components/scroll-area): Styled cross-browser scrolling. Requires: radix-ui. - [Carousel](/design-library/components/carousel): Horizontal slide rail. Requires: embla-carousel-react. ## Data - [Table](/design-library/components/table): Static tabular data. - [Data Table](/design-library/components/data-table): Sorting, filtering, pagination, selection. Requires: @tanstack/react-table. - [Chart](/design-library/components/chart): Themed chart wrappers. Requires: recharts. ## App patterns - [Page Header](/design-library/components/page-header): Title, meta, and actions atop a page. - [Section Header](/design-library/components/section-header): Heading row with supporting actions. - [Filter Bar](/design-library/components/filter-bar): Search, filters, and view controls in one row. - [Activity Feed](/design-library/components/activity-feed): Timeline of events with actors and times. - [Progress Steps](/design-library/components/progress-steps): Multi-step wizard indicator. - [Tree View](/design-library/components/tree-view): Nested, keyboard-navigable hierarchy. - [Notifications](/design-library/components/notifications): Inbox-style notification list. ## Messaging - [Bubble](/design-library/components/bubble): Chat message bubble. - [Message](/design-library/components/message): Message with author and metadata. - [Message Scroller](/design-library/components/message-scroller): Virtualised, stick-to-bottom message list. ## Marketing blocks - [Banner](/design-library/components/banner): Dismissible announcement bar. - [Header Navigation](/design-library/components/header-navigation): Marketing navbar with mobile menu. - [Hero Section](/design-library/components/hero-section): Headline, sub, and CTA pair. - [Header Section](/design-library/components/header-section): Centred intro for a page or section. - [Features Section](/design-library/components/features-section): Feature grid with featured icons. - [Metrics Section](/design-library/components/metrics-section): Big-number stats band. - [Social Proof](/design-library/components/social-proof): Logo cloud. - [Testimonial Section](/design-library/components/testimonial-section): Quote cards with ratings. - [Pricing Section](/design-library/components/pricing-section): Tiers with a billing toggle. - [FAQ Section](/design-library/components/faq-section): Accordion of common questions. - [CTA Section](/design-library/components/cta-section): Full-bleed call to action. - [Newsletter CTA](/design-library/components/newsletter-cta): Email-capture band. - [Blog Section](/design-library/components/blog-section): Post teaser cards. - [Team Section](/design-library/components/team-section): People grid with avatars. - [Careers Section](/design-library/components/careers-section): Open-roles list. - [Contact Section](/design-library/components/contact-section): Info column and message form. - [Footer](/design-library/components/footer): Multi-column site footer. ## Install ``` npx @oratiq-js/ui init npx @oratiq-js/ui add button input field ```