UI Components Showcase

A comprehensive showcase of all the UI primitive components available in the Niwad design system.

Typography

All typography variants available in the design system

Heading 1 - Main Page Title

Heading 2 - Section Title

Heading 3 - Subsection Title

Heading 4 - Component Title

Heading 5 - Small Title

Heading 6 - Smallest Title

This is body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is caption text for additional informationThis is small text for fine print or metadata

Buttons

Button components with different variants and sizes

Variants

Sizes

With Icons

Form

Form components for user input and validation

Formik Form Example

Inputs

Input components with different states and configurations

Default Input

Input with Start Icon

Input with End Icon

Error State

This field is required

Alerts

Alert components for different types of messages

Information

This is a default alert with some information for the user.

Success

Your changes have been saved successfully.

Warning

Please review your input before proceeding.

Error

Something went wrong. Please try again later.

Loaders & Spinners

Loading indicators in different sizes and variants

Spinners

Spinner Variants

Loader with Text

Loading components...

Interactive Demo

Cards

Card components for organizing content

Simple Card

A basic card with header and content

This is the card content area where you can place any information.

Card with Footer

A card that includes footer actions

This card demonstrates the footer area with action buttons.