component gallery

interactive components for the nimbus.css library. Copy and paste directly into your project.

alerts

contextual feedback messages for user actions.

ℹ️ information
this is an informational message.
✓ success
operation completed successfully.
✗ error
something went wrong, please try again.
⚠️ warning
please review before proceeding.
✨ metallic sky alert
a premium metallic style alert.

avatars

user profile images and initials.

SM MD LG JD

badges & chips

small elements for status, tags, and labels.

primary success warning danger
#design #code #new

buttons

standard button styles with various states and variants.

cards

container components with frosted glass or solid backgrounds.

frosted card

this is the default card style with a beautiful backdrop blur effect.

solid card

a solid background alternative for when transparency isn't needed.

gradient card

eye-catching gradient background perfect for featured content.

metallic sky card

beautiful metallic gradient with a sky-like finish effect.

color palette

the core color system of nimbus.css.

frost #a0d2eb
fog #e5eaf5
ocean #0077b6
sky #caf0f8
sapphire #0284c7
emerald #10b981
forest #065f46
sandy #fbbf24
danger #dc626b
pebble #6b7280
ink #1e293b
midnight #0f172a
snow #f8fafc
ash #f1f5f9

complete card example

a comprehensive card example combining multiple components.

🌊 nimbus
design system new v1.0

nimbus library

a minimal, lightweight CSS library with a modern frosted glass design aesthetic. Perfect for building beautiful interfaces quickly.

👤 12 contributors ⭐ 234 stars

inputs & forms

form controls for capturing user data.

please enter a valid email address
username is available!

skeleton

loading placeholders for content.

tables

clean data display with hover states.

name status role action
jane cooper active admin
cody fisher pending editor

tabs

navigation tabs for switching between views.

text effects

gradient text, glows, highlights, and animated effects.

gradient text

frost to ocean gradient

ocean to sapphire

emerald gradient

sunset gradient

metallic sky

animated gradient

text glow

frost glow effect

ocean glow effect

emerald glow effect

highlighted text

this text has a frost highlight marker effect.

this text has an ocean highlight marker effect.

this text has an emerald highlight marker effect.

this text has a sandy highlight marker effect.

underline effects

hover for animated underline

static gradient underline

tip boxes

highlighted boxes for tips, warnings, or important notes.

💡 pro tip: this is a standard tip box.
🌊 ocean variant: uses the ocean gradient.
✓ success tip: great for positive reinforcement.

typography & semantics

standard html elements with nimbus styling.

"simplicity is the ultimate sophistication."
click to expand me

hidden content revealed! useful for faqs or extra details.

press cmd + c to copy.
use highlighted text for emphasis.