HomeInterfaceComponents

Components

Every building block used in Hisaab. Copy the markup from this page into your own screens.

Colours

Change these CSS variables to rebrand the template

Primary--primary

Accent--accent

Success--success

Warning--warning

Danger--danger

Info--info

Ink--ink

Line--line

Primary for the main action, plain for the rest

Status badges match order and invoice states

PaidPendingRefundedShippedNewDraftNo dot

Say what happened and what to do next

Payment received. $4,180 from Daniela Zhang is on its way to your bank.

New feature: export any table to CSV from the toolbar.

3 products are low on stock. Reorder to avoid missed sales.

Card declined. Update your payment method to keep your plan active.

Progress bars and skeleton placeholders

Monthly goal72%

Storage62%

Profile complete90%

Modal, toast, dropdown and tooltip

Press Esc to close any modal or menu. Press Ctrl + K to jump to search.

Accessible, keyboard-friendly tabs

Tabs switch content without leaving the page. Use the arrow keys to move between tabs.

Bricolage Grotesque with Instrument Sans

Body text is Instrument Sans at 15px with a 1.55 line height. Headings and figures use Bricolage Grotesque.

Small muted text for hints and secondary details.