NextSaaS UI is built upon NextUI, a 'Beautiful, fast and modern React UI library'.
Light/Dark Theme
By default, NextSaaS adopts a dark theme. You can easily switch between light and dark themes by toggling the Sun/Moon icon located in the top right corner of the navigation bar.
To modify the default theme, navigate to /app/layout.tsx and adjust the
defaultTheme prop on the Providers component.
Custom Theme
NextSaaS offers extensive customization options for colors and layout attributes through the nextui plugin within /tailwind.config.js. For comprehensive guidance on customizing themes, refer to the official theme documentation.
With these customization capabilities, you can tailor NextSaaS to match your brand identity and create a personalized user experience.
Theme Generator Tool
The NextUI ThemeGen tool allows you to effortlessly create themes for both light and dark modes. As an open-source tool, I encourage you to report any issues or suggest enhancements on GitHub.
Colors
Below are some color options that can be utilized to customize the theme of your NextSaaS application. Depending on your preference for light or dark themes, ensure that the corresponding theme is active in the documentation.
Once you've selected your preferred theme, you can explore the available color options to suit your design needs.
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose