Buttons
Variants
Sizes
Loading State
With Border Radius Modifiers
<button class="nc-btn nc-btn-primary">Primary</button>
<button class="nc-btn nc-btn-secondary">Secondary</button>
<button class="nc-btn nc-btn-primary nc-btn-lg">Large
Button</button>
Cards
Frosted Glass Card
Beautiful backdrop blur effect with subtle transparency. This is
the default card style.
Solid Card
Traditional solid background with subtle border for a clean look.
Gradient Card
Eye-catching gradient background perfect for featured content.
Silver Gradient Card
Beautiful silver-ish gradient with metallic finish effect.
<div class="nc-card"> <h3>Card Title</h3>
<p>Card content</p> </div>
Badges
Primary
Secondary
Success
Warning
Danger
Silver
With Icons
✓ Verified
⚠ Pending
✗ Failed
🔔 2 New
<span class="nc-badge nc-badge-primary">Primary</span>
<span class="nc-badge nc-badge-success">✓ Verified</span>
Chips (Tags)
Smaller, thinner components perfect for tags and labels.
Default
Primary
Secondary
Success
Warning
Danger
Silver
Use Cases
#javascript
#css
#html
New
Beta
v1.0.0
<span class="nc-chip nc-chip-primary">#javascript</span>
<span class="nc-chip nc-chip-success">New</span> <span
class="nc-chip nc-chip-default">v1.0.0</span>
Complete Card Example
A comprehensive card using Nimbus 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
<div class="nc-card"> <!-- Image --> <img
src="image.jpg" style="width: 100%; height: 200px; object-fit: cover;
border-radius: 0.5rem; margin-bottom: 1rem;"> <!-- Tags -->
<div style="margin-bottom: 0.75rem;"> <span class="nc-chip
nc-chip-primary">Design System</span> <span class="nc-chip
nc-chip-success">New</span> <span class="nc-chip
nc-chip-default">v1.0</span> </div> <!-- Title
--> <h3 style="color: var(--nc-ocean);">Nimbus
Library</h3> <!-- Description --> <p style="color:
#6b7280;"> A minimal, lightweight CSS library with a modern frosted
glass design aesthetic. </p> <!-- Buttons --> <div
style="display: flex; gap: 0.5rem;"> <button class="nc-btn
nc-btn-primary">Get Started</button> <button class="nc-btn
nc-btn-outline">Documentation</button> </div>
</div>
Tabs
<button class="nc-tab-active">Active</button> <button
class="nc-tab-inactive">Inactive</button>
Alerts
💡 Information
This is an informational message with frosted glass effect.
✓ Success!
Your changes have been saved successfully.
⚠ Warning
Please review this information carefully before proceeding.
✗ Error
Something went wrong. Please try again later.
✨ Silver Alert
Beautiful gradient alert with silver-ish finish that transitions from
light to dark blue.
<div class="nc-alert nc-alert-success"> <div
class="nc-alert-title">✓ Success!</div> Your changes have
been saved. </div>
Tip Boxes
Modern shiny tip boxes with gradient backgrounds and colored shadows.
💡 Pro Tip: A detected pixel doesn't necessarily
indicate a duplicate! Example: Google Ads can split
between conversion and remarketing.
🌊 Ocean Variant: This tip box uses the ocean
gradient for important information.
✓ Success Tip: Your implementation is working
correctly! All systems operational.
<div class="nc-tip"> 💡 <strong>Pro Tip:</strong>
Your message here... </div> <div class="nc-tip
nc-tip-ocean">...</div> <div class="nc-tip
nc-tip-emerald">...</div>
Table
| Service |
Status |
Users |
Action |
|
📊
Analytics
|
Online
|
2,543 |
|
|
📱
Mobile App
|
Warning
|
1,234 |
|
|
🔒
Security
|
Offline
|
0 |
|
<div class="nc-table-wrapper"> <table class="nc-table">
<thead>...</thead> <tbody>...</tbody>
</table> </div>
Avatar
Sizes
XS
SM
MD
LG
XL
With Images
With Status
JD
AB
CD
Avatar Group
<span class="nc-avatar">JD</span> <span
class="nc-avatar"><img src="..." /></span>
Skeleton / Loading
Placeholder content while loading data.
<div class="nc-skeleton nc-skeleton-text"></div> <div
class="nc-skeleton nc-skeleton-avatar"></div>
Toast / Notifications
Click buttons to show toast notifications.
<div class="nc-toast nc-toast-success"> <span
class="nc-toast-icon">✓</span> <div
class="nc-toast-content"> <div
class="nc-toast-title">Success</div> <div
class="nc-toast-message">Message here</div> </div>
</div>
Dialog / Modal
Click the button to open a dialog. Toggle with
nc-dialog-open class.
<div class="nc-dialog-overlay nc-dialog-open"> <div
class="nc-dialog"> <div
class="nc-dialog-header">...</div> <div
class="nc-dialog-body">...</div> <div
class="nc-dialog-footer">...</div> </div> </div>
Background Gradients
Apply gradient backgrounds to any element with these utility classes.
nc-bg-silver
Metallic blue-silver gradient
nc-bg-ocean
Frost to ocean gradient
nc-bg-frost
Frosted glass effect
nc-bg-midnight
Dark gradient
nc-bg-success
Green gradient
nc-bg-danger
Red gradient
nc-bg-warning
Amber gradient
nc-bg-sky
Sky gradient for heroes
<div class="nc-bg-silver nc-radius-lg">Silver
section</div> <section class="nc-bg-ocean">Ocean
section</section>
Text Effects
Gradient text, glows, highlights, and animated effects.
Gradient Text
Frost to Ocean Gradient
Ocean to Sapphire
Emerald Gradient
Sunset Gradient
Animated Gradient
Highlighted Text
Use frost highlight for
emphasis.
Use ocean highlight for
emphasis.
Use
emerald highlight for
emphasis.
Text Glow
Frost Glow Effect
Ocean Glow Effect
<span class="nc-text-gradient">Gradient Text</span>
<span class="nc-text-highlight">Highlighted</span>
<span class="nc-text-glow">Glow Effect</span>
Skeleton Loaders
Loading placeholders for content.
<div class="nc-skeleton nc-skeleton-avatar"></div> <div
class="nc-skeleton nc-skeleton-text"></div> <div
class="nc-skeleton nc-skeleton-image"></div>
Alerts & Tips
Alerts
ℹ️ Information
This is an informational message.
✓ Success
Operation completed successfully.
⚠️ Warning
Please review before proceeding.
✗ Error
Something went wrong, please try again.
Tip Boxes
💡 Pro Tip: This is a standard tip box.
🌊 Ocean Variant: Uses the ocean gradient.
✓ Success Tip: Great for positive reinforcement.
<div class="nc-alert nc-alert-success">...</div> <div
class="nc-tip nc-tip-ocean">...</div>
+3