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.
Forms
Inputs and choice controls with real labels, helper text and validation states.
As printed on your ID.
Enter a valid email address.
Verified.
Include the postal code.
Annual income (lakh)40L
Theme colour
#613AF5
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.
NeutralPrimaryApprovedRejectedPendingInfo
All schemesEducationWith iconRemovableDisabled
ARVSMIGP
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.
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.
68%
No applications yet
When you apply for a scheme it will appear here.
Share your feedback
How was this service?
Overlay
Layered surfaces: dialogs, tooltips, menus and transient toasts.
Saves a draft you can finish laterRight
Saved
Your changes have been saved.
Update available
A new version of the form is ready.
Data
Tables, collapsible panels and pagination for dense information.
| Scheme | Department | Status | Applicants |
|---|---|---|---|
| PM Awas Yojana | MoHUA | Open | 12,480 |
| Skill India | MSDE | Open | 8,902 |
| Digital Literacy | MeitY | Closed | 5,113 |
Loading Chart.js…
Scheme adoption (thousands)2k→ 240k
Media
Slide decks for banners and galleries.
Accessibility
The GIGW / RPwD-aligned universal-access launcher — adjust text size, spacing, contrast, motion and more, persisted across visits.
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.