SDAIA UI is one set of components that adapts to the screen. Spacing and type tokens switch automatically between desktop, tablet and phone values, and components reflow to the width they are given. Separate mobile layouts are only needed where the interaction itself changes: navigation, tables, dialogs and pickers.
| Screen | Support level |
|---|---|
| Desktop | Primary target. Every flow is designed and tested here first. |
| Tablet | Fully supported. Every flow works, with the tablet token values. |
| Phone |
| Key tasks: approvals, notifications and look-ups. Long data-entry flows may be simplified or desktop only. |
There are three system breakpoints. They are the same in Figma (the Desktop, Tablet and Mobile modes of the Spacing and Typography variables), in the tokens and in the CSS that the command-line tool installs.
| Tier | Viewport width |
|---|---|
| Mobile | Under 768px |
| Tablet | 768px to 1279px |
| Desktop | 1280px and up |
In Figma, draw tablet frames at 768px wide or more. A frame narrower than 768px renders with the mobile values in code.
The CSS that init installs is mobile first: the mobile values are the defaults, and media queries at 768px and 1280px switch to the tablet and desktop values. Spacing, font sizes and line heights change. You don't need to add any class: every component and every utility built on these tokens (p-spacing-xl, gap-spacing-2xl, text-text-md…) follows the screen width.
This CSS is installed from version 1.7.0 of the sdaia-ui command-line tool. If your project was set up with an older version, run init again: it adds the responsive token block to your global CSS without touching your components.
npx sdaia-ui@latest init
Type sizes and line heights (desktop / tablet / mobile):
| Token | Font size · line height |
|---|---|
| display-2xl | 72 / 56 / 48px · 90 / 72 / 64px |
| display-xl | 60 / 48 / 40px · 72 / 64 / 56px |
| display-lg | 48 / 36 / 32px · 60 / 48 / 40px |
| display-md | 36 / 30 / 24px · 44 / 40 / 32px |
| display-sm | 30 / 24 / 20px · 38 / 32 / 28px |
| display-xs | 24 / 20 / 18px · 32 / 28 / 24px |
| text-xl | 20 / 18 / 16px · 30 / 26 / 24px |
| text-lg | 18 / 16 / 14px · 28 / 24 / 20px |
| text-md | 16 / 14 / 12px · 24 / 20 / 18px |
| text-sm | 14 / 12 / 10px · 20 / 16 / 14px |
| text-xs | 12 / 10 / 8px · 18 / 14 / 12px |
| text-2xs | 10 / 8 / 8px · 14 / 12 / 10px |
Spacing (desktop / tablet / mobile):
| Token | Value |
|---|---|
| spacing-xxs | 2 / 2 / 2px |
| spacing-xs | 4 / 4 / 4px |
| spacing-sm | 8 / 6 / 6px |
| spacing-md | 8 / 8 / 8px |
| spacing-lg | 12 / 12 / 8px |
| spacing-xl | 16 / 12 / 12px |
| spacing-2xl | 20 / 16 / 12px |
| spacing-3xl | 24 / 20 / 16px |
| spacing-4xl | 32 / 24 / 20px |
| spacing-5xl | 40 / 32 / 24px |
| spacing-6xl | 48 / 40 / 32px |
| spacing-7xl | 64 / 48 / 40px |
| spacing-8xl | 80 / 64 / 48px |
| spacing-9xl | 96 / 80 / 64px |
| spacing-10xl | 128 / 96 / 80px |
| spacing-11xl | 160 / 128 / 96px |
Icon sizes, radii, border widths and colors don't change between screen sizes.
viewport-mobile or viewport-tablet classes yourself. The media queries already switch the values at the right widths.text-sm md:text-md) on top of the tokens. The tokens already step down.Tailwind has five breakpoint prefixes. Two of them are the system breakpoints; use the others only to fine-tune a layout inside a tier. Tokens don't change at 640, 1024 or 1536px.
| Prefix | Meaning |
|---|---|
| sm (640px) | Inside the mobile tier: large phones in landscape. Fine-tuning only. |
| md (768px) | Tablet starts. Same as the token breakpoint. |
| lg (1024px) | Inside the tablet tier: large tablets and small laptops. Fine-tuning only. |
| xl (1280px) | Desktop starts. Same as the token breakpoint. |
| 2xl (1536px) | Inside the desktop tier: wide screens. Fine-tuning only. |
<main className="mx-auto w-full max-w-[1216px] px-4 md:px-8"> <div className="grid grid-cols-4 gap-4 md:grid-cols-6 md:gap-8 xl:grid-cols-12 xl:gap-6"> <section className="col-span-4 md:col-span-6 xl:col-span-8">…</section> <aside className="col-span-4 md:col-span-6 xl:col-span-4">…</aside> </div> </main>
// The same breakpoints in JavaScript const isTabletUp = window.matchMedia('(min-width: 768px)').matches; const isDesktop = window.matchMedia('(min-width: 1280px)').matches;
See Grid layouts for the column grid of each tier.
Today, on a phone, components reflow: fields, alerts, file upload and cards take the full width, text wraps, and the token values shrink. A few components already switch layout automatically: Date Picker and Nav Header change to their compact form below 1024px. Some components have a mobile prop that you set yourself: Table, Modal, Pagination, Calendar Header and the Nav Header actions.
Separate mobile layouts that switch automatically are planned for the places where the interaction changes:
Until those layouts ship, wide tables scroll sideways inside their own container, and dialogs are centered cards that fill the phone width.
Every component and every page must fit a 360px-wide screen without the page scrolling sideways. Content that cannot shrink, such as a wide table or a code sample, scrolls inside its own container. Avoid fixed widths and minimum widths; use w-full, max-w-* and min-w-0 so content can shrink.
| Component | On a phone today |
|---|---|
| Text Input | Sized by its content, or the full width of its container with fullWidth. Text and padding follow the tokens. |
| Text Area | Full width of its container; people can resize it vertically. |
| Select | Full width of its container. Long values are truncated; the option list scrolls. |
| Date Picker | Switches automatically to a compact single-month calendar below 1024px. Planned: full-screen picker on phones. |
| Modal | Centered, up to 600px wide, with a margin on small screens. Buttons stack below 768px. Planned: full-screen or bottom sheet on phones. |
| Table | Scrolls sideways inside its container when columns don't fit. Planned: stacked cards on phones. |
| Horizontal Tabs | Tabs share the width of the row. No scrolling yet, so keep to a few short labels on phones. |
| Nav Header | Switches automatically to the compact header with a menu button below 768px. |
| Pagination | Wraps to a new line when needed. The mobile prop shows fewer page numbers (set it yourself). |
| File Upload | Full width of its container. File names are truncated and the status row wraps. |
| Alerts | Full width of its container. Below 768px the text wraps and the actions move to their own row. |
| Button | Sized by its label, or full width with fullWidth. Text and padding follow the tokens. |
| Card | Full width of its column, at least 250px wide. Place cards in a grid that changes columns per tier. |
Each component page has a Responsive behavior section with the same three rows: Desktop (1280px and up), Tablet (768–1279px) and Phone (under 768px), plus what is planned.
Checked at 360, 768, 1280 and 1440px wide.
No sideways page scrolling at 360px.
Checked at 200% browser zoom.
Checked in English (LTR) and Arabic (RTL).
Checked in the light and dark themes.
Touch targets on phones are at least 44 × 44px for the main actions.