Components
The full set, rendered live
All 41 components across nine groups, shown in their canonical states.
Everything here is the real @hopline/ux4g-react
library running in the page, styled only by the design tokens.
Each component's exact API contract lives in
packages/react/contracts, with usage notes
in the matching *.prompt.md file beside the source.
Actions
Buttons and icon-only triggers in three colourways and four fill treatments.
IconButton
always pass aria-label
Forms
Inputs and choice controls with real labels, helper text and validation states.
Input
As printed on your ID.
Enter a valid email address.
Verified.
Textarea
Include the postal code.
Select
Checkbox
Radio
share a name
Switch
Search
DatePicker
RangeSlider
Annual income (lakh)40L
ColorPicker
Theme colour
#613AF5
FileUpload
Upload documents
Drag a file here, or browse
PDF or JPG, up to 5 MB
Display
Surfaces and identity primitives: cards, badges, chips and avatars.
Card
Badge
NeutralPrimaryApprovedRejectedPendingInfo
Chip
All schemesEducationWith iconRemovableDisabled
Avatar
ARVSMIGP
Comment
threaded replies
AR
Asha Rao2 hours ago
The new grievance form is much clearer. I could attach my documents on the first try.
SD
Support Desk1 hour ago
Thank you for the feedback, Asha. We are glad the document upload worked smoothly.
Feedback
Status messages and progress indicators that keep people informed.
Alert
Heads up
Applications close on 30 June.
Submitted
Your form was received.
Action needed
Two documents are missing.
Failed
The upload could not be completed.
Progress
68%
Spinner
EmptyState
No applications yet
When you apply for a scheme it will appear here.
FeedbackWidget
shown inline; ships as a corner launcher
Share your feedback
How was this service?
Overlay
Layered surfaces: dialogs, tooltips, menus and transient toasts.
Modal
opens on click
Tooltip
hover or focus
Saves a draft you can finish laterRight
Menu
click the trigger
Toast
Saved
Your changes have been saved.
Update available
A new version of the form is ready.
Popover
click the trigger
Data
Tables, collapsible panels and pagination for dense information.
Table
| Scheme | Department | Status | Applicants |
|---|---|---|---|
| PM Awas Yojana | MoHUA | Open | 12,480 |
| Skill India | MSDE | Open | 8,902 |
| Digital Literacy | MeitY | Closed | 5,113 |
Accordion
Pagination
List
rows with leading + trailing slots
Chart
themed Chart.js v4 wrapper
Loading Chart.js…
IndiaMap
data-driven choropleth — click a state
Scheme adoption (thousands)2k→ 240k
Media
Slide decks for banners and galleries.
Carousel
Accessibility
The GIGW / RPwD-aligned universal-access launcher — adjust text size, spacing, contrast, motion and more, persisted across visits.
AccessibilityWidget
live — launcher docked at the bottom-right of this page
The accessibility launcher is mounted live on this page — look for the universal-access button at the bottom-right corner. Open it to adjust text size, line and letter spacing, contrast, grayscale, link highlighting, a readable font, a larger cursor, paused motion and a reading guide. Your choices apply instantly and are remembered on your next visit.
In your own app you mount it once: <AccessibilityWidget />. It is the same "Accessibility Bar" pattern mandated across Indian government portals.