Powered by NeGD | MeitY Government of India® UX4G
Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Documentation and examples for badges, our small count and labeling component.
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Group a series of buttons together on a single line or stack them in a vertical column.
Use UX4G’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
UX4G’s cards provide a flexible and extensible content container with multiple variants and options.
A slideshow component for cycling through elements—images or slides of text—like a carousel.
A generic close button for dismissing content like modals and alerts.
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Toggle contextual overlays for displaying lists of links and more with the UX4G dropdown plugin.
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Use UX4G’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Documentation and examples for how to use UX4G’s included navigation components.
Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Use loading placeholders for your components or pages to indicate something may still be loading.
Documentation and examples for adding UX4G popovers, like those found in iOS, to any element on your site.
Documentation and examples for using UX4G custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Automatically update UX4G navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
Indicate the loading state of a component or page with UX4G spinners, built entirely with HTML, CSS, and no JavaScript.
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Documentation and examples for adding custom UX4G tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
Stepper is a component that displays content as a process with defined by user milestones. This is a great solution for a variety of registration forms, where you don't want to scare the user with lots of fields and questions.
Government of
India
