@hopline/ux4g-react-native

React Native components for UX4G — India's government design system (NeGD · MeitY · ux4g.gov.in). Unofficial, community packaging by Hopline.

41 components, genuinely native (RN primitives + react-native-svg — no WebView, no DOM), strict TypeScript (no any), themeable, and driven by a single design-token source of truth.

npm install @hopline/ux4g-react-native react-native-svg
# or: pnpm add / yarn add

Peer deps: react >=18, react-native >=0.73, react-native-svg >=15. Works in bare RN and Expo.

Quick start

Wrap your app in ThemeProvider, then use components:

import { ThemeProvider, Button, Input, Card } from "@hopline/ux4g-react-native";

export default function App() {
  return (
    <ThemeProvider>
      <Card title="Apply for a scheme">
        <Input label="Full name" required />
        <Button onPress={submit}>Submit</Button>
      </Card>
    </ThemeProvider>
  );
}

Theming

The whole system re-skins from two ramps + the font families ("Theme Craft"). Pass a full 50–900 colour ramp:

import { ThemeProvider, ramp } from "@hopline/ux4g-react-native";

<ThemeProvider primary={{ ...ramp.violet, 600: "#0EA5E9" }}>
  {/* every component now uses your brand colour */}
</ThemeProvider>;

Or build a theme object once with makeTheme({ primary, secondary, fontFamily }) and pass it as the theme prop. Read the active theme anywhere with useUX4GTheme(). Every component also accepts an optional theme prop override.

Fonts

The default theme references NotoSans (body/display), Roboto-Medium (UI labels) and RedHatMono (mono). Register these in your app (e.g. expo-font / @expo-google-fonts), or override fontFamily to use your own.

Components (41)

| Group | Components | |---|---| | Actions | Button, IconButton | | Forms | Input, Textarea, Select, Checkbox, Radio, Switch, Search, DatePicker, RangeSlider, ColorPicker, FileUpload | | Display | Card, Badge, Chip, Avatar, Comment | | Feedback | Alert, Progress, Spinner, EmptyState, FeedbackWidget | | Overlay | Modal, Tooltip, Menu, Toast, Popover | | Data | Table, Accordion, Pagination, List, Chart, IndiaMap | | Navigation | Tabs, Breadcrumb, Stepper, Navbar, Footer | | Media | Carousel | | Accessibility | AccessibilityWidget |

Plus IndiaGeo (the SVG geography data behind IndiaMap).

Design tokens (single source of truth)

The raw token primitives (colour ramps, spacing, radius, border) live in tokens/ux4g.primitives.tokens.json in the DTCG format and are emitted to src/tokens.generated.ts by node scripts/gen-tokens.mjs. The semantic theme (aliases, shadows, type scale) is assembled in theme.ts. Edit the JSON, not the generated file — the same DTCG source can feed web (CSS), Compose, and SwiftUI via Style Dictionary.

Native performance

These are real React Native components, so on the New Architecture (Fabric + Hermes, the default on RN 0.76+/recent Expo) they render at native speed.

Lists & virtualization. Select virtualizes its dropdown with FlatList, so long option lists (countries, currencies) mount only the visible window. Components that render inherently bounded collections — Tabs, Breadcrumb, Pagination, Accordion, Chart, IndiaMap (37 fixed regions), Carousel — use Array.map deliberately; virtualizing them would be wrong.

Table and List render the rows/items you give them eagerly (no windowing). They're designed to sit inside your page layout, so for large datasets paginate them with the Pagination component (render a page of rows at a time) rather than handing them thousands of rows — or wrap your data in your own FlatList.

Dropping to native. For genuine performance hot-paths (heavy compute, a platform-native view, camera/ML), drop to Kotlin/Swift via the Expo Modules API and call it from JS — you stay in React Native to do it.

Accessibility

Components ship sensible roles, labels and states (e.g. Checkbox exposes accessibilityState, Button exposes disabled, overlays trap and label their controls). The AccessibilityWidget provides an in-app a11y panel (text scaling, contrast, dyslexia/ADHD aids, etc.). On native, prefer cooperating with OS settings (Dynamic Type, Reduce Motion, screen readers) for the features the OS already owns.

License

MIT © Hopline. UX4G is © NeGD · MeitY, Government of India; this is unofficial community packaging.