NuvoUI is built by developers, for developers. We've included powerful tools that make development faster, easier, and more enjoyable.
Combine multiple utility mixins in a single call, with support for responsive modifiers and pseudo-classes. It's the most powerful way to manage styles in SCSS.
// SCSS
.hero-title {
@include NuvoUI.apply(
text-center, font(bold), width-percent(80), text-size(4rem) sm, text-size(7rem) md, my(3rem) md,
);
span {
@include NuvoUI.apply(
block, uppercase, font(bold), text-size(2xl), text-size(4xl) md,
)
}
}
// Compiles to clean, optimized CSS
.hero-title {
text-align: center;
font-weight: 700;
}
.hero-title {
width: 80%;
}
@media screen and (min-width: 640px) {
.hero-title {
font-size: 4rem;
}
}
@media screen and (min-width: 768px) {
.hero-title {
font-size: 7rem;
}
}
@media screen and (min-width: 768px) {
.hero-title {
margin-top: 3rem;
margin-bottom: 3rem;
}
}
.hero-title span {
display: block;
text-transform: uppercase;
font-weight: 700;
font-size: 1.75rem;
}
@media screen and (min-width: 768px) {
.hero-title span {
font-size: 2.5rem;
}
}
Create beautiful, adaptive interfaces that work perfectly across all devices with intuitive responsive utilities and powerful breakpoint controls.
<!-- Responsive layouts with intuitive modifiers -->
<div class="flex col@sm row@md gap-20">
<div class="fill-12@sm fill-6@md fill-4@lg p-2 bg-blue-100">Card 1</div>
<div class="fill-12@sm fill-6@md fill-4@lg p-2 bg-blue-200">Card 2</div>
<div class="fill-12@sm fill-6@md fill-4@lg p-2 bg-blue-300">Card 3</div>
</div>
Create responsive designs effortlessly with our intuitive modifier syntax. Simply add
@sm,
@md, or @lg
to any utility class to apply styles at specific breakpoints.
<div class="flex col@sm row@md p-1 p-2@md p-3@lg">
<!-- Content adapts perfectly to any screen size -->
</div>
For more complex responsive patterns, use our powerful media query mixins that give you complete control over your breakpoints with a clean, intuitive syntax.
.sidebar {
@include NuvoUI.media-up('md') {
display: block;
}
@include NuvoUI.media-between(600, 'lg') {
width: 250px;
}
}
NuvoUI isn't just a design system, it's your design system. Customize colors, spacing, typography, and more to perfectly match your brand and project requirements.
Override any default with your own values to create a fully branded experience that maintains all the power and flexibility of NuvoUI.
@use '@nuvoui/core/src/styles/index.scss' as NuvoUI with (
$primary: #4361ee,
$secondary: #3f37c9,
$font-family: 'Montserrat, sans-serif',
$generate-utility-classes: false,
$column-count: 16,
);
Access a complete palette of color variations, automatically generated for each base color you define. Perfect for creating depth and hierarchy in your designs.