Dependencies
The Kaharagia Design System is designed to be lightweight with minimal external dependencies. Most components work with just CSS and vanilla JavaScript.
Core Requirements
The design system CSS has no external dependencies. Simply include the stylesheet and you're ready to build accessible government services.
| Requirement | Version | Notes |
|---|---|---|
| Modern browser | See browser support | CSS custom properties support required |
| Noto Sans font | Latest | Optional - falls back to system fonts |
CSS-Only Components
The following components work with CSS only, no JavaScript required:
- Alerts
- Back Link
- Badge
- Breadcrumbs
- Buttons
- Cards
- Character Count (display only)
- Checkboxes
- Date Input
- Details (uses native
<details>element) - Empty States
- File Download
- File Upload
- Inset Text
- Lists
- Pagination
- Panel
- Phase Banner
- Progress Indicator
- Radios
- Search Box
- Select
- Skip Link
- Spinner
- Status Dot
- Summary List
- Tables
- Tags
- Text Input
- Textarea
- Timeline
- Warning Text
JavaScript-Enhanced Components
These components require JavaScript for full functionality. The design system provides reference implementations, but you can implement them with any framework.
| Component | JavaScript Required For | Dependencies |
|---|---|---|
| Accordion | Expand/collapse behaviour, ARIA state management | None - vanilla JS |
| Autocomplete | Search filtering, keyboard navigation, ARIA | None - vanilla JS |
| Character Count | Real-time character counting | None - vanilla JS |
| Cookie Banner | Consent management, localStorage | None - vanilla JS |
| Modal | Open/close, focus trapping, escape key handling | None - vanilla JS |
| Notification | Auto-dismiss, animations | None - vanilla JS |
| Signature Pad | Canvas drawing, touch support | None - uses HTML5 Canvas API |
| Tabs | Tab switching, keyboard navigation, ARIA | None - vanilla JS |
| Tooltip | Show/hide on hover/focus | None - vanilla JS |
React Reference Implementations
For React projects, the design system documentation site includes reference implementations of interactive components. These use React 19 with no additional dependencies.
// Example: Using the Accordion component
import Accordion from '@/components/Accordion';
<Accordion
items={[
{ title: 'Section 1', content: 'Content for section 1' },
{ title: 'Section 2', content: 'Content for section 2' },
]}
/>Optional Enhancements
For specific use cases, you may want to add these optional dependencies. These are recommendations — you'll need to install and implement them in your own project.
Implementation note
Only signature_pad is used in the reference implementations. Other libraries are suggestions based on common government service needs. The design system CSS is designed to work with these libraries when you add them to your project.
Signature & Drawing
| Use Case | Suggested Library | Notes |
|---|---|---|
| Signature capture | signature_pad | Smooth signature drawing on canvas. Used in the Signature Pad component. |
Date & Time
| Use Case | Suggested Library | Notes |
|---|---|---|
| Date picker (calendar) | Flatpickr | Lightweight, accessible date picker with calendar UI |
| Date manipulation | date-fns or Day.js | Modern date utilities. Much lighter than Moment.js |
Form Validation
| Use Case | Suggested Library | Notes |
|---|---|---|
| Schema validation | Zod | TypeScript-first schema validation. Framework agnostic. |
| React forms | React Hook Form | Performant form handling for React projects |
| Phone validation | libphonenumber-js | Google's libphonenumber for JS. Validates and formats international phone numbers. |
| Bank account validation | iban.js | IBAN validation and formatting |
| Postcode validation | postcode-validator | Validates postcodes for multiple countries |
File Handling
| Use Case | Suggested Library | Notes |
|---|---|---|
| Drag-and-drop upload | react-dropzone | Accessible file drag-and-drop for React |
| File type detection | file-type | Detect file type from Buffer/ArrayBuffer. Useful for security validation. |
| Image processing | Sharp | High-performance image resizing (server-side, Node.js) |
Document Generation
| Use Case | Suggested Library | Notes |
|---|---|---|
| PDF generation | pdf-lib | Create and modify PDFs in JavaScript. No external dependencies. |
| PDF from HTML | html2pdf.js | Convert HTML to PDF. Good for confirmation pages. |
| QR codes | qrcode | Generate QR codes for tickets, receipts, and reference numbers |
Data Display
| Use Case | Suggested Library | Notes |
|---|---|---|
| Data tables | TanStack Table | Headless table utilities for sorting, filtering, pagination |
| Charts | Chart.js | Accessible charting library with good defaults |
| Maps | Leaflet | Open-source mapping library |
Rich Content
| Use Case | Suggested Library | Notes |
|---|---|---|
| Rich text editor | Tiptap | Headless, accessible rich text editing |
| Markdown rendering | react-markdown | Safe markdown rendering for React |
Internationalisation
| Use Case | Suggested Library | Notes |
|---|---|---|
| Translations | i18next | Internationalisation framework. Works with React, Vue, vanilla JS. |
| Number/currency formatting | Built-in Intl API | Use native browser APIs: Intl.NumberFormat, Intl.DateTimeFormat |
Build Tools
The design system CSS works with any build setup. For development convenience:
- PostCSS - For CSS processing and autoprefixing
- Sass/SCSS - Optionally compile from Sass if preferred
- Tailwind CSS - Can be used alongside the design system tokens
Browser Support
The design system supports modern browsers:
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Internet Explorer is not supported. CSS custom properties require modern browser support.