Vita UI

@nhic/vita is the design system for Rwanda's digital health services, from NHIC (Ministry of Health): accessible React components built on Base UI and Tailwind CSS v4, so every NHIC system looks and behaves the same. Components, examples and API reference are on the docs site; every component page is built from tested stories.

Install

npm install @nhic/vita
# or: pnpm add @nhic/vita · yarn add @nhic/vita

Requires React 19 (react, react-dom).

Set up

Styles, in a Tailwind v4 app:

@import 'tailwindcss';
@import '@nhic/vita/fonts.css';
@import '@nhic/vita/theme.css';

Without Tailwind: import '@nhic/vita/styles.css';

Wrap the app once:

import { Button, VitaProvider, toast } from '@nhic/vita';

export function App() {
  return (
    <VitaProvider>
      <Button onClick={() => toast.success('Project created')}>Create project</Button>
    </VitaProvider>
  );
}

French and Kinyarwanda strings: <VitaProvider locale="fr-RW" messages={frMessages}> (or rwMessages, a draft pending native-speaker review), both exported from @nhic/vita.

Entry points

Heavy modules live on subpaths so apps only install and bundle what they use. Install a subpath's peer dependencies before importing it.

| Import | What | Peer dependencies to install | | ------------------------ | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | @nhic/vita | Components, provider, brand, i18n | — | | @nhic/vita/icons | Lucide icons (react-icons/lu) | — | | @nhic/vita/icons/<set> | Any react-icons set: pi, wi, md, tb… | — | | @nhic/vita/date | DatePicker, DateRangePicker, TimePicker… | react-day-picker, date-fns | | @nhic/vita/calendar | Calendar (month/week/day/agenda) | react-day-picker, date-fns | | @nhic/vita/data-table | DataTable | @tanstack/react-table, @tanstack/react-virtual | | @nhic/vita/charts | 35 charts, ChoroplethMap with rwandaDistricts | echarts | | @nhic/vita/editor | Rich-text Editor | @tiptap/core, @tiptap/react, @tiptap/pm, @tiptap/starter-kit, @tiptap/extension-placeholder, @tiptap/extension-mention, @tiptap/suggestion | | @nhic/vita/sortable | SortableList, Kanban (drag-and-drop with keyboard) | @dnd-kit/core, @dnd-kit/sortable | | @nhic/vita/geo-3d | GeoMap3D (WebGL 3D maps; falls back to GeoMap) | @deck.gl/core, @deck.gl/layers, @deck.gl/geo-layers, @deck.gl/aggregation-layers |

CSS and static files: @nhic/vita/styles.css, theme.css, tokens.css, fonts.css, @nhic/vita/fonts/*, @nhic/vita/assets/*.

Licence

MIT © Ministry of Health, Rwanda (NHIC). Third-party material it includes (Inter typeface, Rwanda district boundaries under CC BY 4.0) is listed in THIRD_PARTY_NOTICES.md. Show rwandaDistrictsAttribution wherever you render the district map.