01 Primitives

02 Core

03 Semantic

03 Semantic Extensions

01 Contained Variant

02 Outlined Variant

03 Pill Variant

04 Text Variant

05 Color Specifications

01 Chip Variants

02 Clickable Chips

03 Dropdowns & Selects

Visual States

Default

​

Select an option

​

Active/Focused

​

Option 1

​

Disabled

​

Select an option

​

Error State

​

Error Option

​

This field has an error

Success State

​

Success Option

​

Verified successfully

Warning State

​

Warning Option

​

Please review selection

Multi-Select & Grouped Options

Multi-Select with Select All

Select genders...

​

Grouped Multi-Select (Figma Style)

VIBGYOR HIGH - Malad

​

Multi-Select with External Chips (Image 2 Style)

Select venues...

​

VIBGYOR - Malad

VIBGYOR - Thane

React Hook Form Integration

Select Role

Choose a role...

​

Multi-Select Roles (Async Style)

Select multiple roles...

​

Status

Select status...

​

Submit Form

04 Text Fields

Visual States

Label

​

Label

​

Help Text

Label

​

Help Text

Label

​

Help Text

Additional States

Disabled

​

Loading

​

With Icon

​

​

01 Date Picker Variants

Visual States

Date of Birth

​

Event Date

​

Invalid date selected

Start Date

​

Date confirmed

End Date

​

Please verify date

Additional States

Disabled Date

​

Selected Date

​

01 With Image

Most liked

Students Annual Badminton Sports Tournament

Grade 1 - 10

Female

Registrations open till 24 Feb 2026

Event date: 28th Feb - 6th March

Venue: VIBGYOR Malad

₹8,88,888 onwards

Students Annual Badminton Sports Tournament

Grade 1 - 10

Registrations open till 24 Feb 2026

Event date: 28th Feb - 6th March

Venue: VIBGYOR Malad

₹8,88,888 onwards

Students Annual Badminton Sports Tournament

Grade 1 - 10

Registrations open till 24 Feb 2026

Event date: 28th Feb - 6th March

Venue: VIBGYOR Malad

₹8,88,888 onwards

02 Without Image

03 Edge Case: All Props Enabled Together

What happens when showMostLiked=true, showLike=true, AND showShare=true?

⚠️ Current Behavior

When ALL props are true:
• Most Liked badge shows (on image or with subtitle)
• Like & Share buttons are HIDDEN
→ Most Liked takes priority

Most liked

Students Annual Badminton Sports Tournament

Grade 1 - 10

Registrations open till 24 Feb 2026

Venue: VIBGYOR Malad

₹8,88,888 onwards

✅ Recommended Usage

Use either/or, not both:
Option 1: showMostLiked only
Option 2: showLike & showShare only

This prevents UI conflicts and maintains clean design.

Students Annual Badminton Sports Tournament

Grade 1 - 10

Registrations open till 24 Feb 2026

Venue: VIBGYOR Malad

₹8,88,888 onwards

03 All Features Together (Most Liked + Like + Share)

Showing Most Liked badge AND Like/Share buttons together

Most liked

Students Annual Badminton Sports Tournament

Grade 1 - 10

Registrations open till 24 Feb 2026

Event date: 28th Feb - 6th March

Venue: VIBGYOR Malad

₹8,88,888 onwards

Students Annual Badminton Sports Tournament

Grade 1 - 10

Most liked

Registrations open till 24 Feb 2026

Event date: 28th Feb - 6th March

Venue: VIBGYOR Malad

₹8,88,888 onwards

03 Loading State

01 Size Variants

02 Image+fields. Rectangle.

Dialog with image on top and form fields below

03 Image+fields. Horizontal.

Dialog with image on left and content on right

04 Static Data View Only.

Read-only data display dialog

05 Form with fields.

One column + two column, customisable.

06 Alerts.

Alert dialogs for notifications and confirmations

07 Toasts.

Toast notifications for feedback and alerts

01 Basic Variants

02 Complex Example (Cart)

A full-featured drawer with lists, summary, and action buttons

03 Size Variants