Enjoy customizable lists, team work tools, and smart tracking all in one place. Set tasks, get reminders, and see your progress simply and quickly.
NuvoUI’s utility-first approach gives you complete control over styling. With a rich set of classes, you can build sophisticated layouts and components directly in your markup.
Easily integrate NuvoUI with your existing projects. Its SCSS-first approach ensures compatibility with any design system or framework.
Optimize performance effortlessly. With pre-built utilities and components, NuvoUI helps you create stunning designs faster than ever.
Enjoy clean code and clear documentation. NuvoUI is designed to empower developers at every skill level with intuitive tools and robust support.
NuvoUI sets the foundation for building sleek, responsive, and modern web applications. Its utility-first approach ensures adaptability and precision across devices.
Create fluid layouts effortlessly with utility classes like w-40@lg and w-20@sm.
NuvoUI ensures your designs
scale perfectly from mobile to desktop.
...
Design with confidence using support for Grid, Flexbox, and Containers. With utilities like
flex, col, and
center, you can build layouts that adapt to any use case.
...
Achieve precision in responsive design with NuvoUI’s dynamic breakpoint mixins. Whether you’re targeting specific screen sizes or ranges. These tools like make it effortless to craft layouts that adapt seamlessly to any device or resolution.
@include NuvoUI.media-up('lg') { ...
@include NuvoUI.media-down(500) { ...
@include NuvoUI.media-between(600, 'lg') { ...
NuvoUI provides unmatched customization options, allowing developers to tailor designs and layouts to suit their unique needs.
Adjust column counts dynamically using SCSS variables like $column-count: 12. NuvoUI’s grid
system is
versatile, making it ideal for any project scale.
@use '@nuvoui/core/src/styles/index.scss' as NuvoUI with (
$column-count: 12,
...
);
Personalize every aspect of your project by defining custom colors, columns, and breakpoints. Build applications that reflect your brand’s identity effortlessly.
@use '@nuvoui/core/src/styles/index.scss' as NuvoUI with (
...
$primary: #FF6F00,
$warning: #F8AF08,
$danger: #FF3B30,
$success: #34C759,
...
);
Explore a complete range of color shades, from soft pastels to rich, vibrant tones. NuvoUI’s versatile palette empowers you to design visually captivating themes that suit any project.
--blue: #3b82f6;
--blue-50: #f5f9ff;
--blue-100: #e2ecfe;
--blue-200: #cee0fd;
--blue-300: #bad3fc;
--blue-400: #a7c7fb;
--blue-500: #3b82f6;
--blue-600: #1b3b6f;
--blue-700: #152e56;
--blue-800: #0f213e;
--blue-900: #091425;
NuvoUI is designed to simplify development with tools and utilities that make coding faster, cleaner, and more efficient.
Use mixins like media-up to create responsive designs that adapt seamlessly to various breakpoints. NuvoUI ensures consistency across devices.
@include NuvoUI.media-up('lg') { ...
@include NuvoUI.media-down(500) { ...
@include NuvoUI.media-between(600, 'lg') { ...
More than 300 mixins are ready to streamline your workflow with pre-built mixins for
margins, paddings, and more. Features like @mixin
mt($val) make styling easier and more efficient.
@include NuvoUI.adaptive-contrast($color) { ...
@function find-text-color(color) { ...
@include NuvoUI.media-between(number, 'breakpoint') { ...
// Example: @include supports(display: grid) { }
@mixin supports($property) {
@supports (#{$property}) {
@content;
}
}
Explore a complete range of color shades, from soft pastels to rich, vibrant tones. NuvoUI’s versatile palette empowers you to design visually captivating themes that suit any project.
// SCSS
.navbar {
@include NuvoUI.apply(
px(100px), py(20px), px(40px)_lg, flex, row, x-center, between
);
}
// output
.navbar{
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px 100px;
}
@media screen and (min-width:1024px){
.navbar{
padding-left: 40px;
padding-right: 40px;
}
}
Enable dark mode instantly with data-theme="dark". Enhance user
experience and align with modern
design trends
using this out-of-the-box feature.
Simplify your styling process with NuvoUI’s unique apply mixin. Unlike conventional methods, this powerful
tool
lets you combine multiple NuvoUI mixins, such as px(100px), py(20px), flex, row, center,
into
a
single, clean command. Achieve precise, reusable styles with minimal code, boosting both productivity and
maintainability.