Nebula UI Framework

A futuristic, state-of-the-art UI framework with a cosmic aurora aesthetic

Buttons

Interactive elements designed with cosmic gradients and subtle animations.

Button Variants

Button States

Button Sizes

Icon Buttons

Button Group

With Tooltip

A helpful tooltip

Form Elements

Sleek, intuitive inputs and controls with cosmic aurora styling.

Text Inputs

This is a standard text input field

Validation States

This input has been validated successfully
This input contains an error

Checkboxes & Radios

Toggle Switch

Cards

Versatile content containers with subtle cosmic styling and hover effects.

Standard Card

This is a standard card with header, body, and footer sections. Cards can contain any content, from text to complex components.

Accent Card

This card variant features a colorful accent line on the left side. It's perfect for highlighting important information.

Glass Card

A modern, glass-morphic card with blur effect. This style works especially well against gradients or background images.

Modals

Dialog overlays with futuristic styling for focused user interactions.

Modal Title

This is a standard modal dialog implemented with the HTML

element for better accessibility. It supports proper focus management and keyboard navigation.

Large Modal with Tabs

This is a larger modal dialog containing more complex content like tabs.

Alerts & Notifications

Cosmic-styled information and feedback elements to guide users.

Alert Types

Information

This is an informational message with additional details.

Success

The operation was completed successfully.

Warning

Please review this important information before proceeding.

Error

An error occurred while processing your request.

Toast Notifications

Toasts appear temporarily at the bottom right of the screen.

Tabs & Accordions

Interactive components for organizing and displaying related content.

Tabs

First Tab Content

This is the content for the first tab. Tabs are great for organizing related information without taking up too much vertical space.

Second Tab Content

This is the content for the second tab. You can switch between tabs to view different content without changing pages.

Progress45%

Third Tab Content

This is the content for the third tab. Each tab can contain any components or content needed.

Here's some additional information in the third tab.

Accordions

Progress Indicators

Visual indicators for processes, loading states, and completion metrics.

Progress Bars

Basic Progress (25%)25%
In Progress (50%)50%
Almost Complete (75%)75%
Complete (100%)100%

Interactive Demo

Click the buttons below to see the progress bar update in real-time.

Current Progress0%