## Buttons

Interactive button components with frosted glass effects, multiple variants, and sizes.

### Button Variants

### Button Sizes

### Button Shapes

### Button States

## Form Inputs

Frosted glass styled form controls including text inputs, textareas, selects, and more.

### Text Inputs

Default Input
Small Input
Large Input

### Textarea & Select

Textarea
Select Dropdown

### Checkboxes & Radios

Checkbox Option 1 Checkbox Option 2 Radio Option 1 Radio Option 2

### Toggle Switch

Toggle Setting Another Toggle

### Slider

Volume: 50%

## Cards

Versatile card components with frosted glass effects for content display.

### Card Variants

#### Basic Card

A simple card with frosted glass effect and subtle border.

#### Glass Card

Enhanced frosted glass card with ultra blur effect.

#### Elevated Card

Card with enhanced elevation and shadow effects.

### Info Cards

💡

#### Quick Tip

Use keyboard shortcuts to navigate faster

✓

#### Success

Your changes have been saved

⚠

#### Warning

Please review before continuing

### Stats Cards

### 1,247

Total Users

### 98.5%

Uptime

### 42

Pending Tasks

## Badges & Tags

Small status indicators and removable tags with frosted glass styling.

### Badges

Default Primary Success Danger Warning Info

### Badge Sizes

Small Medium Large

### Notification Badge

0

### Tags

JavaScript
TypeScript
React
CSS

## Progress Indicators

Visual feedback components for loading states and progress tracking.

### Progress Bars

Default Progress

Success

Warning

Danger

### Spinners

### Skeleton Loaders

## Lists & Menus

Organized content display with interactive list items and dropdown menus.

### Basic List

- 📄
  Document 1
  Last edited 2 hours ago
  2.4 MB
- 📄
  Document 2
  Last edited 1 day ago
  1.8 MB
- 📄
  Document 3
  Last edited 3 days ago
  3.1 MB

### Dropdown Menu

## Tabs

Navigation components for organizing content into separate views.

### Default Tabs

#### Overview

Welcome to the Eden CSS showcase. This demonstrates all the beautiful frosted glass components.

#### Features

Explore the powerful features of our design system including responsive layouts and smooth animations.

#### Settings

Customize your experience with various configuration options and preferences.

### Pill Tabs

All items displayed here.

Active items only.

Completed items.

Archived items.

## Modals & Dialogs

Overlay components for focused interactions and important messages.

### Modal Triggers

## Color Palette

The complete color system used throughout Eden's design language.

### Accent Colors

Primary
Blue
Purple
Success
Danger
Warning
Info

### Modal Title

This is a default modal with frosted glass effect. It showcases the beautiful backdrop blur and transparency that makes Eden's UI stand out.

You can add any content here including forms, images, or other components.

✓

### Success!

Your action has been completed successfully.

!

### Are you sure?

This action cannot be undone. Please confirm before proceeding.