Component library
This page shows the components every screen of the garages app is built from: in Arabic and English, light and dark. What changes here changes on every screen that uses it.
The pieces made for the garages app: big, colour that means something, few words. Every screen is built from them.
Deep indigo and sunny yellow. Green, amber and red are kept for meaning: paid, soon, expired.
app/globals.css — brand blockGarages
Run motorcycle and car garages: every vehicle with its owner and subscription
Vehicle colours
Titles and numbers: Baloo Bhaijaan 2
Body text: Readex Pro
Motorcycle, car, van, bicycle — in the vehicle’s own colour.
VehicleIconA Syrian plate: private, public, motorcycle. It stays the same in Arabic and English.
PlateBadgeGreen paid or inside, amber ends soon, red expired or owes money.
StatusPillIn new Syrian pounds; a big number, a small currency.
Money · moneyText()A huge icon and a word or two. One press, one job.
BigActionButtonA big number in its meaning colour; opens the list behind it.
CountTileInitials on a colour fixed by the name, and a status dot.
PersonAvatarA big ring: amber past 80 %, red when full.
OccupancyRingLists on a phone are cards, not tables. The edge strip is the subscription colour.
VehicleCardMohammad Al-Halabi
Honda CG 125 · 7 days left
Ibrahim Al-Dakkak
Red Suzuki · 16 days left
Ibrahim Kayyali
Hyundai Accent · 2 days left
Abdullah Shehadeh
Saipa Tiba · 27 days left
Ibrahim Sabbagh
Kinlon KL150 · 11 days left
Ibrahim Sabbagh
Red Trinx · 20 days left
A big back button, a clear title, and one action on the end side.
ScreenHeaderBy plate number, name or phone. Arabic digits are converted as you type.
SearchBarMohammad Al-Halabi
Honda CG 125 · 7 days left
Abdullah Sabbagh
Orange Suzuki · 9 days left
Mohammad Trabulsi
Black Yamaha · 4 days left
Huge digit keys instead of the phone keyboard.
NumberPad · BigNumberDisplayA few steps, and one big button at the bottom of the screen.
StepWizardStep 1 of 3
Rises from the bottom of the screen. Every pick list inside it opens whole above it.
BottomSheetAn owner of several garages switches between them in one press.
GarageSwitcher · CurrentGarageSwitcherA friendly drawing, one sentence and one button.
GarageEmptyThe first payment you take will show up here.
Simple drawings in the brand colours; they follow night mode.
ArtA title, a count, and an «all» link.
SectionTitleFour tabs and the big «In / Out» button in the middle — you see it at the bottom of every app screen.
components/shell/TabBarColour, type and corners, then the smallest pieces every screen is built from: buttons, badges, avatars and hints.
Every colour on screen is one of these names, never a hand-typed code. Click a colour to copy its name.
tokens · ColorSwatchTwo colours make a project its own: the brand and the accent, plus the ink. The three are written in ONE block at the top of the stylesheet, and everything shown here is derived from them — light and dark alike. Change that block and every screen changes.
Brand
Accent
Ink steps
Surfaces
Lines
The four status tones
| Tone | Soft | Solid | When |
|---|---|---|---|
Brandbrand | Sample | Sample | The main action, links, selection |
Neutralneutral | Sample | Sample | Drafts, secondary actions |
Accentaccent | Sample | Sample | What deserves a gentle look |
Successsuccess | Sample | Sample | Approved, complete, on time |
Warningwarning | Sample | Sample | Close to due, needs a change |
Dangerdanger | Sample | Sample | Late, delete, reject |
Infoinfo | Sample | Sample | In review, a note |
Status tones are fixed: they never follow a rebrand, so red is red in every project.
Gradient and the deep shade
Signature gradient
For the ONE key action on a screen
bg-signatureGlow
For a page hero or an empty state
bg-glowDeep shade
The sidebar and tooltips
bg-deepEight sizes are enough for every screen. Figures are always Latin digits and line up in columns.
text-*text-4xl36pxThis week's report is ready for review
A big figure in a page header
text-3xl30pxThis week's report is ready for review
Screen title
text-2xl24pxThis week's report is ready for review
Section title
text-lg18pxThis week's report is ready for review
Card title
text-[15px]15pxThis week's report is ready for review
Lead paragraph
text-sm14pxThis week's report is ready for review
Body text
text-xs12pxThis week's report is ready for review
A hint under a field
text-2xs11pxThis week's report is ready for review
A small label over a group
One base corner (10 px) the others derive from, and five shadows for elevation. In dark mode the shadows go deeper.
rounded-* · shadow-*Corners
sm · 6md · 8lg · 10xl · 142xl · 18full · ∞Shadows
xssmmdlgxlbrandSix shapes, each taking any tone. The signature shape is for the ONE key action of a screen.
ButtonButtons joined in one frame, or a spaced row. The group's size and tone apply to every button in it.
ButtonGroupJoined
Spaced
A square button with only its icon. Its name is required, and shows as a tooltip on hover or focus.
IconButtonShapes
Sizes
A main action with an arrow beside it that opens the alternatives. The menu floats above everything, is never clipped, and Escape closes it.
SplitButtonShapes
States
Copies the text and says «Copied» right where it was pressed, for two seconds. This is house's own button, in the library's colours.
CopyButtonhttps://house.example/invite/7Q2KA short word for a state: soft, solid or outlined, with a dot or an icon.
BadgeSoft
Solid · Outline
Sizes
A tag that toggles when pressed (for filters), is removed with its button, or carries a person.
Tag · ChipFor filtering
Removable
People
A small number in a bubble that reads «99+» past its limit, and a dot that breathes for what is live now.
Count · StatusDotShapes
States
Two initials in a colour fixed to the name everywhere, or the photo when there is one, with a presence dot.
Avatar · AvatarGroupSizes
States
Group
A short word on hover or keyboard focus. It even tells why a disabled button is disabled.
TooltipWith a shortcut
On a disabled button
Key caps (⌘ on Apple devices, Ctrl elsewhere) and a separating line, with or without a word.
Kbd · SeparatorKbd
Separator
Every field here is built on house's Field: the label above the box, its message under it, one height and one border for every box. Lists and the calendar open over the page and nothing clips them.
The label, the control, and its own message under it. Every field in the library goes through it.
FieldStates
We only send the sign-in link there.
Enter a valid address, like name@example.org.
One line, with an icon, a prefix or a suffix, and a character counter when needed.
TextField · InputStates
Empty
Filled
Another project already uses this name.
Disabled
Read only
Checking
Extras
Accepted
Shown at the top of the report.0 / 40
Sizes
Grows with the text up to a limit, then scrolls; counts characters when the text has a maximum.
TextAreaField · TextareaStates
Sent to the reviewer with the request.86 / 200
Write the reason so the requester knows what to fix.
The − and + buttons (hold to keep going), the arrow keys, a minimum and a maximum; digits typed on an Arabic keyboard read as Latin.
NumberFieldStates
From 0 to 80, in half-hour steps.
The smallest allowed number is 1.
Disabled
A clear button appears as you type, Esc clears, and a keyboard shortcut puts the cursor in it.
SearchFieldStates
The eye shows what was typed. The box runs left to right in both languages.
PasswordInputStates
At least twelve characters.
The password is too short.
Disabled
Every choice from a list goes through it. A short list opens as it is; a long one (seven options or more) has a search box that understands Arabic spelling.
SearchSelectStates
Short list
Long list with search
Choose the branch's city.
Disabled
Typed or picked from the calendar. Accepts 25/2/2027 and Arabic digits and turns them into year-month-day.
DateInputStates
This month or the next only.
Enter the whole date.
The same date box, with the same day in the Umm al-Qura calendar under it (or beside it), following every pick.
DateFieldLayouts
Hijri: 3 Jumada I 1448 AH
Hijri under the box
The Hijri date shows here once a day is picked
Hijri beside it
For a date in a table or a card: Gregorian and Hijri, on one line or two, with the governing calendar emphasised.
DualDateDisplay
One line
2026-10-143 Jumada I 1448 AHTwo lines
2026-10-143 Jumada I 1448 AHHijri governs
2026-10-143 Jumada I 1448 AHThe official riyal sign (SAMA), drawn, before the figure in both languages. Digits are always Latin.
Money · RiyalSignDisplay
Full
4,850,000Compact
4.9MWith the code
SAR 1,250With halalas
312.50Groups the thousands as you type, and turns Arabic digits into Latin ones.
MoneyInputStates
Stored value: nothing yet
The amount is above the approved budget.
Disabled
A fixed-length code sent by text or email. Typing moves to the next box, pasting fills them all, Arabic digits read as Latin. Not the same as the two-step sign-in box below.
OtpInputStates
Empty
Complete
The code is wrong or has expired.
Split 3 + 3
One box that takes an authenticator app code (six digits) or a backup code shaped XXXXX-XXXXX.
CodeInputStates
Drop or browse; the files are listed under it with their size and a remove button. It draws progress only for a real upload the screen reports.
FileDropStates
Attach a signed copy of the contract.
On or off, and «some» when a group is partly chosen.
CheckboxStates
House's own checkbox (for a form posted as is)
Several options under one label, with «select all».
CheckboxGroupStates
Choose at least one channel.
A vertical or horizontal list, with a line of explanation per option.
RadioGroupLayouts
Choose how often the report reaches you.
For a decision where each option needs a sentence.
RadioCardsFor a setting that applies at once, with no save button.
SwitchStates
Sizes
Always one choice among a few, such as how a list is shown.
SegmentedControlStates
Layouts
Several choices switched on and off, with an optional count.
ToggleChipsStates
Sizes
One value or a range, with marks under it and a bubble with the value while dragging.
SliderStates
Everything that appears over the page: windows, the side panel, the confirm question, toasts, menus and anchored panels — and with them the page’s quiet states: empty, loading, progressing. Every list and calendar here opens whole above the window that holds it, and Escape closes only the top layer.
A window over the page for a short task: a form, details, or a decision. Escape, a click outside or the close button closes it, and focus returns to the button that opened it. On a phone it rises from the bottom edge.
Dialog · DialogCloseSizes
A form inside a dialog
A panel that slides in from the screen’s end (the right in English) for longer things: filters, a record’s details, settings. Same fields; their lists open whole above it.
SheetAsks before something that cannot be undone. A click outside does not close it — the answer is yes or no. It can ask for a word to be typed first, and run the work inside itself until it finishes. It opens from anywhere, even from inside an open dialog.
AlertDialog · useConfirmTones
A short word in the screen’s corner about something that happened elsewhere or in the background. It leaves by itself, its timer stops while the pointer is over it, and it shows above any open window.
toast · ToasterTones
Cases
Verbs under a button. It opens under or above it depending on the room, and no table, card or dialog clips it. Arrows move, a first letter jumps, and Escape closes it and returns focus to the button.
DropdownMenuEvery kind of item
«⋯» at a row’s end — the menu grows towards the start
A small panel under a button: a quick filter, a two-field form, a piece of information. Focus moves into it; a click outside or Escape closes it.
PopoverQuick filter
Applies to the list below it.
Shows when the pointer rests on a name or a link, or when the keyboard reaches it, after a short moment. For previews only — no buttons in it.
HoverCardA note about the whole screen: a refusal, an absence, a standing condition. Not where a field’s error goes — that is written under the field itself.
CalloutWhile a result is on its way, the place it will appear says so: the button spins until the new data is really on screen, and the list dims in place instead of being replaced.
components/PendingA button and a list sharing one pending state
The list never disappears and keeps its scroll: it only dims until the new row arrives.
A panel with nothing to show yet
The spinner on its own
A small drawing, a title, one line of help, and the next step. Four kinds: nothing yet, no results, all done, and failed to load.
EmptyStateNobody here yet
Add the first person to the branch and the list will appear here.
No results for “senior accountant”
Try a shorter word, or clear the filters.
Nothing is waiting for you
You have reviewed every request. We will tell you when a new one arrives.
Could not load the list
The connection to the server dropped. Nothing was lost.
Small — inside a card or a table
No results for “senior accountant”
Try a shorter word, or clear the filters.
The shape of what is coming, with a calm light crossing it in the reading direction. For a first load only: what is already shown and refreshing stays put and dims.
Skeleton · SkeletonText · SkeletonAvatar · SkeletonCard · SkeletonTable · SkeletonTableRowBlocks and lines
A card
A table
How far along something measurable is: a file uploading, a wizard’s steps, a share of a target. Digits are always Latin.
Progress · SegmentedProgress · ProgressRingThe bar
Nearly full — delete old attachments.
Steps
Step 2 of 4 · Attachments
The ring
The figures that matter, in a tile, and the charts that explain them. Their colours come from the chart slots in the brand block, their digits are Latin, and under Arabic time runs from the right.
A label, a figure, the change against the last period, and a small trend. The change is coloured by whether it is good news, not by its sign: fewer failed sign-ins is green.
StatCardActive people
1,284
+12%against last month
Failed sign-ins
37
−18%fewer is better
Sign-ins today
412
+6%against yesterday
On-time attendance
92%
target 95%
Requests waiting
8
0%same as last week — the whole tile is a link
A comparison between categories: columns for months, stacked when made of parts, or horizontal rows for long Arabic names. Hover to see the details.
BarChartStacked columns
Horizontal rows
A trend over time, one line or more, with a filled area under the first and a dashed target line.
LineChartThe parts of one whole. It turns from the top in the reading direction; hover a part to see its figure and share in the middle.
Donut80
requests
A trend without axes, beside a figure or inside a tile. It ends on a dot at the last value.
SparklineExplains a chart’s colours. The eight slots follow the brand and the dark theme; no colour is written by hand.
ChartLegendThe eight chart slots
With values
House's own table, not a copy from another library. It reads the database, so it is not drawn on this page.
components/data-tableFetches only the page you see from the server, sorts and searches there, opens a row in a side sheet, and lets the reader choose and resize columns. It runs on the People screen.