☁️ ☁️ ☁️ ☁️

nimbus.css

lightweight css with opinionated defaults.
component-first. No utility classes.

get started components

beautiful defaults

typography, colors, and spacing that just work together.

🌙

dark mode

automatic adaptation via prefers-color-scheme.

📦

lightweight

no bloat. Semantic classes like .nc-btn, .nc-card.

installation

add nimbus to your project with a single line.

<!-- Add to your <head> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rheav/nimbus.css@latest/nimbus.min.css">
<!-- Optional: Include the Outfit font for best results --> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap" rel="stylesheet">

components

ready-to-use components with the nc- prefix. Here's a complete card example.

featured new

card title

a minimal css library with frosted glass effects.

<div class="nc-card">
  <span class="nc-chip nc-chip-primary">featured</span>
  <span class="nc-chip nc-chip-success">new</span>

  <h3>card title</h3>
  <p>description text...</p>

  <button class="nc-btn nc-btn-primary">
    get started
  </button>
  <button class="nc-btn nc-btn-outline">
    learn more
  </button>
</div>

view all components →

resources

explore more examples and documentation.