UI Component Showcase

A collection of UI components and their variants used across the application. Use this page to verify visual consistency and behavior.

Color Palette

Available color tokens with semantic, light, main, dark, and darker variants.

Primary

semantic

light

main

dark

darker

Secondary

semantic

light

main

dark

darker

Neutral

white

semantic

light

gray

main

dark

darker

black

Success

semantic

light

main

dark

darker

Warning

semantic

light

main

dark

darker

Danger

semantic

light

main

dark

darker

Info

semantic

light

main

dark

darker

Critical

semantic

light

main

dark

darker

High

semantic

light

main

dark

darker

Medium

semantic

light

main

dark

darker

Low

semantic

light

main

dark

darker

Typography
Next Typography

Next H1

64px bold, line-height 1.1

Next H2

48px semibold, line-height 1.2

Next H3

36px semibold, line-height 1.3

Next Body

16px regular, line-height 1.5

Next Small

14px medium, line-height 1.5

Next Caption

12px medium, line-height 1.5

Headings

Heading 1

64px bold, line-height 76.8px

Heading 2

54px bold, line-height 64.8px

Heading 3

36px bold, line-height 43.2px

Heading 4

32px bold, line-height 38.4px

Heading 5

28px bold, line-height 33.6px

Heading 6

24px bold, line-height 36px

Heading 7

22px bold, line-height 33px

Heading 8

20px bold, line-height 30px

Body

Body 18 - (B18)

18px medium, line-height 27px

Body 16 - (B16)

16px medium, line-height 24px

Body 14 - (B14)

14px medium, line-height 21px

Body 12 - (B12)

12px medium, line-height 18px

Body 10 - (B10)

10px medium, line-height 15px

Body 8 - (B8)

8px medium, line-height 12px

Paragraphs

Paragraph 16 - (P16)

16px regular, line-height 24px

Paragraph 14 - (P14)

14px regular, line-height 21px

Paragraph 12 - (P12)

12px regular, line-height 18px

Paragraph 10 - (P10)

10px regular, line-height 15px

Paragraph 8 - (P8)

8px regular, line-height 12px

Labels
Label 16 - (L16)

16px bold, line-height 24px

Label 14 - (L14)

14px bold, line-height 21px

Label 12 - (L12)

12px bold, line-height 18px

Label 10 - (L10)

10px bold, line-height 15px

Label 8 - (L8)

8px bold, line-height 12px

Cards

Showcasing usage patterns for the Card component.

Default Card
Header, Content, and Footer.

This is the standard card layout used for most content. It includes all standard sections.

Footer Information

Header & Content
No footer section.

Useful for displaying information that doesn't require actions or supplementary footer details.

Simple Card

A minimal card with only content padding. Good for simple wrappers.

Interactive Card
Hover to see effect.

Cards can be made interactive with standard utility classes like `hover:shadow-lg` and `cursor-pointer`.

Custom Style
Using utility classes.

This card uses `bg-neutral-semantic` for a subtle background contrast.

Action Card
Card with button actions.

Common pattern for dashboards or item lists requiring user interaction.

Buttons

Showcasing usage patterns for the Button component.

Sizes
Variants and Colors

Filled

Outlined

Ghost

Soft

Rounded
Disabled
Loading
Toasts

Showcasing toast notification styles and variants.

Interactive

Click buttons to trigger real toast notifications.

With Description (Static)
SuccessOperation completed successfully.
ErrorSomething went wrong.
WarningPlease review before proceeding.
InfoHere is some useful information.
Without Description (Static)
Success
Error
Warning
Info