Buttons

Gradient Cards

Primary Gradient

from-primary-500 to-secondary-600

Sunset Gradient

from-accent-500 to-danger-500

Ocean Gradient

from-primary-400 to-secondary-700

Aurora Gradient

from-success-400 to-secondary-500

Badges

Primary Secondary Success Warning Danger Gradient

Input Fields

Avatars

Progress Bars

Primary 75%

Secondary 60%

Success 90%

Warning 45%

Toggle Switches

Active Toggle

Inactive Toggle

Cards

Default Card

This is a default card with shadow and rounded corners.

Glass Card

This is a glass morphism card with blur effect.

Alerts

Info Alert

This is an informational message.

Success Alert

Your action was successful!

Warning Alert

Please review before proceeding.

Error Alert

Something went wrong!

List Items

List Item Title

Description text

With Toggle

Enable notifications

With Badge

New features

New

Floating Action Buttons

Skeleton Loading

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Regular paragraph text with normal weight.

Small text for captions and helper text.

Gradient Text Effect