Foundations
Theme iris. Every value below is read from the live palette, so this page is the side-by-side when you switch NEXT_PUBLIC_THEME and restart. Contrast is verified by pnpm theme:audit, not by this grid.
Ink · chrome and the primary action
Paper and ink text · the neutral ramp
teal · accent · info · focus
chipfilledsmall text on white
sage · success
chipfilledsmall text on white
clay · danger
chipfilledsmall text on white
saffron · warning · pending · late
chipfilledsmall text on white
violet · employer share · holiday
chipfilledsmall text on white
Display · Plus Jakarta Sans
Body · Inter at 18/lg for lead paragraphs
Body · Inter at 15/base — the working size.
Mono · JetBrains 1,23,456.78 · WN-0042 · 09:45
Devanagari fallback · Mukta — कर्मचारी व्यवस्थापन, तलब, बिदा
Form controls
Fields
Label, helper text, required and error states.
As it appears on citizenship documents.
PAN must be exactly 9 digits.
Used for approval routing.
Visible to your approver.
Choices
Checkbox, radio, switch.
Status chips & badges
Avatars
Money & Nepali dates
<Money />
Paisa in, tabular-nums mono out. Negatives in clay.
<NepaliDate />
BS / AD / dual display; Devanagari via locale.
Bikram Sambat date picker
BS calendar with real month lengths; toggle to AD in the footer.
Joining date is required.
Date & time fields
The replacements for the native controls
<DateField> speaks the same ISO yyyy-MM-dd string<input type="date"> did and shows the BS equivalent beneath it, so it drops into a form without changing what is posted. Reach for<DatePickerBS> instead when the BS date is the thing being chosen — a payroll period, a fiscal year.
Nothing selected.
Only this month is selectable.
Optional dates get an inline clear.
Effective date is required.
09:00
datetime-local's replacement.
Rich text
Authoring and rendering are one stylesheet
<RichTextEditor> emits HTML sanitised to @worknepal/rich-text's allowlist, and <RichTextContent> renders it back through the same .wn-proserules — so a notice cannot look one way while it is written and another once it is published. Server code must sanitise again; the editor's pass is a formatting nicety, never the boundary.
Toolbar, paste cleanup, ⌘B / ⌘I / ⌘K.
For templates, where the author must see the markup.
Rendered
The office will be closed for Dashain.
- Ashwin 20 to 26
Cards & stat cards
Card anatomy
Header, content, footer — 20px padding on an 8px grid.
Cards are white on the paper canvas, separated by a hairline and no resting shadow. Elevation is reserved for things that genuinely float: popovers, dialogs, sheets, toasts.
Overlays
Zod forms — useZodForm + Field + FormDialog
One schema, validated in the browser and again on the server. The shell owns the four lifecycle rules — reset on open, close on success only, a loading submit and a disabled cancel — so a screen cannot forget them.
Tabs & accordion
Toast, skeleton, empty state
Toasts
Skeleton
No employees yet
Add your first employee to start tracking attendance and running payroll.
DataTable — payroll register
Shrawan 2081 payroll
| Earnings | Deductions | Employer | ||||||
|---|---|---|---|---|---|---|---|---|
| Employee | Basic | Allowances | OT | SSF | Tax | SSF (ER) | Status | Net Pay |
| Anita ShresthaWN-0012 | 85,000 | 12,000 | 4,500 | 9,350 | 11,200 | 17,000 | Disbursed | NPR 80,950 |
| Bikash GurungWN-0031 | 1,20,000 | 18,000 | 0 | 13,200 | 19,800 | 24,000 | Disbursed | NPR 1,05,000 |
| Sita MaharjanWN-0044 | 62,000 | 8,000 | 6,200 | 6,820 | 5,400 | 12,400 | Processing | NPR 63,980 |
| Rajesh K.C.WN-0058 | 95,000 | 14,000 | 2,800 | 10,450 | 13,600 | 19,000 | Pending | NPR 87,750 |
| Pramila TamangWN-0067 | 70,000 | 9,000 | 0 | 7,700 | 7,100 | 14,000 | Failed | NPR 64,200 |
| Totals (5) | 4,32,000 | 61,000 | 13,500 | 47,520 | 57,100 | 86,400 | NPR 4,01,880 | |
Scroll horizontally on a narrow viewport: the employee and net-pay columns stay pinned with an edge shadow, the totals row is pinned to the bottom, and the employer SSF column carries the violet wash. Try the density toggle and column menu.
Empty register
| Earnings | Deductions | Employer | ||||||
|---|---|---|---|---|---|---|---|---|
| Employee | Basic | Allowances | OT | SSF | Tax | SSF (ER) | Status | Net Pay |
No payroll runRun payroll for Shrawan to see the register. | ||||||||
Core HR primitives
MultiSelect
Emits [] for an empty selection, never a sentinel — Radix refuses an item whose value is "". Three selections here, more than the trigger can show as chips, so it reads as a count.
3 selected
TagInput
Enter and comma both commit. Backspace on an empty box removes the last tag. Try typing sql (lowercase) and pressing Enter — the duplicate of "SQL" is dropped silently.
FileDropzone
A file picker, nothing else — no upload, no progress. The browse button is not decoration: it is the only keyboard/screen-reader path in.
Drag a document here, or
PDF or image, up to 5MB each
TreeView
Presentational and stateless about the data — a generic node, an expanded-set, a render prop. Three levels deep here; try the arrow keys.
- Engineering42
- Platform18
- Backend11
- Infra7
- Mobile9
- Finance12
- Human Resources6
Stepper
The probation review flow — a linear, numbered sequence.
Self-review
Employee submits
Manager review
Rating + notes
- 3
HR sign-off
Confirmation letter
- 4
Confirmed
Status updated
Callout
Card + token accents — the command centre's alerts.
Fiscal year closing
3 documents expiring this week
Payroll locked
Onboarding complete
Progress
The linear bar — a fraction and a required accessible label.
DateRangeField
One trigger, one two-month calendar: click the start, click the end. A second click before the anchor re-anchors there, so an inverted range cannot be picked.
DescriptionList
<dl> semantics — a profile pane's read-only facts.
- Employee ID
- WN-0012
- Designation
- Senior Accountant
- PAN number
- 123456789
- Bank
- NIC Asia
- Address
- Baneshwor, Kathmandu, Bagmati Province
Timeline
Not <StatusTimeline> — a variable-length event feed with no fixed vocabulary and no notion of "current".
Joined as Junior Accountant
System · Feb 15, 2079, 12:00 AM
Promoted to Senior Accountant
Pramila Tamang · Jan 10, 2081, 12:00 AM
Moved to Finance department
HR Admin · Jun 1, 2081, 12:00 AM
AppShell
Full-viewport frames — open each demo: 56px topbar, collapsible-to-64px icon rail, overlay drawer below 768px.