Nano’s React UI uses Bootstrap 5 for responsive layouts and component styling, with Sass/SCSS for theme customization. The theme includes light and dark color modes and organizes styles into reusable files, making it easier to maintain a consistent design across the application.

Rather than relying on a React-specific component library, Nano builds on standard Bootstrap styles. This approach provides familiar styling conventions and flexibility when customizing the UI.

Organization

The assets folder contains static resources such as fonts, images, and stylesheets. Theme styles are organized using Sass, a CSS extension that adds features such as variables, nesting, and reusable style definitions.

Sass files (.scss or .sass) must be compiled into CSS for the browser. Nano uses Vite as its frontend build tool. Vite supports Sass when the appropriate Sass package is installed in the project.

For styling, use the global SCSS files when a rule should apply across the application, and component-specific styles when a rule belongs to a particular component. Inline React styles are also available for simple, dynamic styling, but SCSS is generally more suitable for shared rules, responsive styles, and theme definitions.

Nanite Theme

Nano’s Nanite theme builds on Bootstrap 5 and provides responsive styling, component styles, and light and dark color modes.

The main theme file, nanite-theme.scss, brings together the theme’s individual SCSS files. It imports the base Bootstrap styles from the installed package before applying Nano’s customizations. The theme is then imported into main.tsx as part of the React application’s entry point.

Two important parts of the theme are:

• variables — defines theme variables that customize the appearance of Bootstrap components and other UI elements.
• theme-mode — contains styles or configuration related to the light and dark color modes.

These files follow Bootstrap’s theming conventions. For more information, refer to the Bootstrap documentation.

As you add components or third-party plugins, you can extend the theme with additional SCSS rules or override existing styles. Some styles may be specific to the React implementation, while shared theme styles can be used across Nano’s React, Vue, and Razor UIs.

Next Steps

You’ve now covered the main parts of Nano’s React frontend. Explore the Vue setup guide or the Razor Pages guide, or continue to the ASP.NET Core Web API guide to learn about the backend.