Design system
Components
Building blocks for the Poinqu admin panel. Every component is typed, accessible, and ready to compose into real screens.
Typography
A consistent type scale for headings, body copy, labels, code, and quotes. Every variant uses the same tokens as the rest of the kit.
Design with rhythm
Heading one
Heading two
Heading three
Heading four
Lead paragraphs introduce a page or section with a little more presence.
Body copy is the default. It is sized for comfortable reading in dense admin screens and pairs with the card and table rhythm.
Small text for metadata and helper copy.
Muted text for secondary information.
Good design is as little design as possible.
Run npm run build before shipping.
Success tone
Warning tone
Danger tone
Gunakan variant="label" untuk eyebrow dan variant="code" untuk inline code. Semua variant bisa diberi tone tanpa mengubah ukuran.
Card
A flexible surface for grouping related content. Every showcase section below uses the same Card component.
Support plan
Your current subscription
Unlimited tickets, SLA policies, and a shared inbox for your support team.
SLA compliance
92% of conversations were answered within the first response target this week.
Upgrade workspace
Advanced SLA policies, audit logs, and priority support.
Built for teams that need more control over routing and reporting.
Alert
Inline messages for information, success, warning, and destructive states.
Ticket volume is calculated from the last seven days of activity.
The SLA policy was updated and applied to all open tickets.
Three tickets are approaching their first response target.
The email sync could not connect. Check the API credentials.
Dismissible
Close this message without leaving the page.
Badge
Compact status labels with soft, solid, and outline treatments.
Soft
Solid
Outline, dot, icon, and size
Notification badge
Form Controls
Inputs, selects, textareas, checkboxes, radios, and switches with consistent sizing, focus states, and validation.
Shown to teammates and customers.
Enter a valid email address.
Managed by your administrator.
Only visible to agents.
Checkbox
Radio
Switch
Combobox
Autocomplete input with a filtered list, keyboard navigation, clear action, and optional multiple selection with chips.
Single select with search, clear, and keyboard navigation.
Multiple select with chips and backspace removal.
Disabled state with a selected value.
Choose a team to continue.
Gunakan panah atas/bawah untuk berpindah opsi, Enter untuk memilih, dan Escape untuk menutup. Mode multiple menyimpan pilihan sebagai chip dan bisa dihapus dengan tombol x atau Backspace.
Attachment
File cards with media, metadata, upload state, progress, and actions. Use them in composers, message threads, and upload lists.
State upload: idle, uploading, processing, error, dan done. Klik kartu untuk preview, atau tombol x untuk menghapus.
Placeholder
Skeleton shapes for loading states. Compose circles, headings, text lines, and rectangles while data is on the way.
Building blocks
Spinner
Indeterminate progress indicators for actions that take a moment.
Tones
Inline
Tabs
Switch between related views in place, with arrow-key navigation and accessible tab panels.
Payment failed on invoice #INV-8821. The gateway returned a timeout, and the customer has retried twice.
Pill variant
Showing ticket volume for today — 584 conversations.
Showing the last seven days — 4,790 conversations.
Showing the last 30 days — 19,160 conversations.
Collapse
Progressive disclosure for secondary details, preferences, and advanced settings.
How do SLA policies work?Targets, business hours, and escalation rules.
Every new ticket inherits the SLA policy for its priority. The timer pauses outside business hours and escalates when 80% of the target has elapsed.
Notification preferencesChoose what your team receives.3 changes
Danger zonePermanent actions for this workspace.
All tickets, attachments, and audit logs will be removed.
Stepper
Show progress through a multi-step flow, with completed, current, and upcoming states.
Vertical
- Ticket createdAug 18, 09:12
- SLA policy appliedHigh priority · 2h target
- Assigned to John DoeSupport team
- ResolvedWaiting for customer confirmation
Pagination
Move through long result sets with page numbers, previous/next controls, and a compact mobile summary.
Di layar kecil, deretan nomor halaman diganti dengan ringkasan “Page X of Y” agar tetap muat.
Marker
Inline notes, bordered status rows, and labeled separators for conversation and activity threads.
Variant default untuk catatan inline, border untuk baris status, separator untuk pemisah berlabel. Gunakan loading untuk status yang sedang berjalan.
Trace
A compact list of steps for reasoning, tool calls, and plans. Lines can expand to show detail and reflect running, error, or pending states.
Thought for 5sDiagnosing the failing CI install
The lockfile is out of sync with package.json, so a frozen install cannot resolve the new version.
- Ran pnpm --version9.12.0
Failed to run pnpm installExit code 1
ERR_PNPM_OUTDATED_LOCKFILE Cannot install with "frozen-lockfile" package.json and pnpm-lock.yaml are out of sync
- Running pnpm buildCompiling 24 routes
- Run pnpm testQueued
Klik baris yang punya detail untuk membuka output. Status running memakai spinner dan shimmer; error, pending, dan done punya warna masing-masing.
List Group
A responsive list for records, activity, and navigation. Meta and actions move to a new row on small screens.
- Ticket #2319Payment failed on invoice · John Doe
- Sarah LeeSupport agent · Online now
- SLA breach risk3 tickets need attention before 18:00
- Knowledge base updatedLogin troubleshooting · 10:30 AM
Coba perkecil viewport: badge meta dan tombol action akan turun ke baris berikutnya secara otomatis.
Accordion
An exclusive group of collapsible panels. Opening one panel closes the others when type is set to single.
SLA & escalation policyTargets, business hours, and escalation rules.
High priority tickets have a two-hour first response target. When 80% of the target elapses, the ticket is escalated to the team lead.
Ticket routingHow conversations reach the right team.
Incoming conversations are routed by language, product area, and agent availability. Manual overrides are always allowed.
Notification rulesAlerts for agents and team leads.3 rules
Security & audit logsWorkspace access and retention.
Audit logs are retained for 12 months. Only workspace administrators can export or delete them.
Hanya satu panel terbuka pada satu waktu. Gunakan type="multiple" jika beberapa panel boleh terbuka bersamaan.
Table
Semantic table primitives with a flush mode that sits edge-to-edge inside a Card, plus aligned cells and a scrollable wrapper.
| Ticket | Subject | Priority | Agent | Status |
|---|---|---|---|---|
| #2319 | Payment failed on invoice | High | John Doe | In Review |
| #2320 | Login issue | Medium | Sarah Lee | Delivered |
| #2321 | Feature request export | Low | John Doe | In Progress |
| #2322 | Contract renewal issue | Medium | Michael Wong | In Progress |
| #2323 | Two-factor authentication | High | Sarah Lee | In Progress |
Table dasar tanpa state. Mode flush dipakai saat tabel berada di dalam card agar header sejajar dengan judul card.
Data Table
Search, sortable columns, row selection, pagination, and an empty state built on top of the Table primitives.
| #2319 | Payment failed on invoice | High | John Doe | In Review | 2025-08-20 | |
| #2320 | Login issue | Medium | Sarah Lee | Delivered | 2025-08-20 | |
| #2321 | Feature request export | Low | John Doe | In Progress | 2025-08-19 | |
| #2322 | Contract renewal issue | Medium | Michael Wong | In Progress | 2025-08-19 | |
| #2323 | Two-factor authentication | High | Sarah Lee | In Progress | 2025-08-18 |
Coba cari, klik header kolom untuk sort, pilih baris, lalu pindah halaman. Toolbar dan footer tetap punya padding sendiri, tabelnya full-bleed di dalam card.
Modal
Centered dialogs, destructive confirmations, forms, a side sheet, and a fullscreen surface.
Modal memakai native <dialog>: fokus terkunci di dalam dialog, Escape menutup, dan klik backdrop juga menutup.
Alert Dialog
A focused confirmation surface for destructive or high-impact actions. Backdrop clicks do not dismiss it.
Alert Dialog memakai role="alertdialog", fokus terkunci di dalam dialog, Escape atau Cancel menutup, dan klik backdrop tidak menutup.
Toast
Stackable, auto-dismissing notifications triggered from anywhere through useToast().
Dropdown
Accessible menus with labels, shortcuts, disabled items, and destructive actions.
Klik trigger atau tekan ↓/↑ untuk membuka menu, lalu gunakan Home, End, Enter, dan Escape untuk bernavigasi.
Tooltip
Short contextual hints on hover or keyboard focus, available in four placements.
Tooltip muncul setelah hover atau fokus singkat, menutup saat blur, dan bisa ditutup dengan Escape. Konten memakai role="tooltip".