Kili Components
Component Reference · preview/components/
Every UI component used across Kili screens. Built on Odoo's structural patterns — status bars, stat buttons, list views, form controls — adapted to the Savanna design language. Each file demonstrates all variants, sizes, and states.
Form controls
4 components
Save
Discard
Disabled
Button
Primary, secondary, ghost, and danger variants. Sizes sm, md, lg. All interactive states including loading.
Customer name
Invoice number…
Form Inputs
Text input, textarea, select, checkbox, radio group, toggle switch. All with error and disabled states.
Overview
Lines
Notes
Tab content area
Tabs
Horizontal tab navigation for switching between sections within a record or page.
Display
7 components
Approved
Pending
Overdue
Chips & Badges
Status chips with colored dot and label. Five workflow statuses matching Odoo record states.
24
Open orders
17
Approved
3
Overdue
Cards & Stat Buttons
Metric cards, content cards, and Odoo-style stat buttons that appear above form records.
Table — List View
Odoo-style list view with sortable headers, bulk selection, record IDs in violet, status chips, and TZS amount formatting.
AK
JM
FO
MN
Avatar
User initials or photo avatars. Used in record headers, activity feeds, and comments.
Progress Bar
Horizontal progress bar with semantic color variants. Used for budgets, completion ratios, and upload progress.
Feedback
4 componentsPayment confirmed successfully.
Invoice is overdue by 14 days.
Alerts & Banners
Inline alerts, page-level banners, and toast notifications. Four semantic types: success, warning, error, info.
Modal & Dialog
Confirmation dialogs and quick-create forms. Focus-trapped with Esc-to-close.
Skeleton & Spinner
Skeleton loader for content areas and inline spinner for action loading states.