Nimbus Design System
Nimbus is Nuvemshop's open-source design system. With components validated in Nuvemshop products, optimized patterns and templates, documentation with examples, and synchronization between the UI kit in Figma and the code, Nimbus enables developers and designers to create consistent, accessible, and high-performance interfaces. You can use it to build your apps within the Nuvemshop ecosystem or for your own project, considering the current license.
Within the context of the application, we encourage the use of Nimbus to develop cohesive and recognizable user experiences. It's important that your application incorporates and makes use of Nimbus libraries , following both app design guidelines and broader Nimbus guidelines. For Integrated applications, using Nimbus is a prerequisite to maintain consistency and quality in interfaces integrated into the store admin.
Key Nimbus Packages
Nimbus Styles
The essential package that provides the necessary variables and styles for the operation of components.
Nimbus Components
The package that brings together a collection of atomic and compound components, essential for building in Nimbus. From buttons to inputs and checkboxes, these building blocks form the foundation of interface design, allowing the creation of more complex and reusable components.
Nimbus Patterns
The central set of pre-built patterns that offer intelligent combinations of atomic and compound components in Nimbus. These predefined solutions, tested and validated by the team, effectively solve design and interaction challenges, promoting a cohesive and consistent approach to implementing design solutions.
Nimbus Tokens
Design tokens represent the fundamental variables used to maintain consistency in a design system. In the context of Nimbus, they encompass elements such as essential colors, typography, and spacing. These tokens are the foundation for ensuring a uniform look and feel across all components and applications.
Nimbus Icons
A set of open-source icons exclusively created for Nimbus, shaped from the morphology of our brand logo. Designed to streamline design and development, these icons offer flexibility, localization, and cost-effectiveness, enriching the solutions for those looking to drive stories in Latin America.
Templates
Settings Screen
Features interactive controls and components that handle grouped states.
Confirmation Modal
Includes a confirmation modal that opens to confirm a destructive action.
Form Page
It includes various data input components that cover a variety of options.
Basic Page Template
Offers a sample case where all possible elements of a page are found.
Login Screen
This login template can be used to log in to an external application.
Simple List Page
Features a simple data list with text strings and actions.
Emulates the Nuvemshop Admin Product List
Emulates the Nuvemshop Admin Product List
Configuring and Using Nimbus
- For this example, we will install only the essential Nimbus packages.
yarn add @nimbus-ds/styles @nimbus-ds/components
or
npm add @nimbus-ds/styles @nimbus-ds/components
- We import all the necessary Nimbus components and the CSS styles file into our project, enabling the use of any Nimbus component in the project.
import React from "react";
import useThemeContext from "@theme/hooks/useThemeContext";
import "@nimbus-ds/styles/dist/index.css";
import { Title, Card, Text, Button, Alert, Box } from "@nimbus-ds/components";
const App: React.FC = () => (
<Box display="flex" flexDirection="column" gap="4">
<Title as="h1">My simple app</Title>
<Alert appearance="primary" title="Hello world">
This is a simple alert to show Nimbus components
<Button>Click me</Button>
</Alert>
<Card>
<Card.Body>
<Text fontSize="base">
This is a sample paragraph inside a Card component.
</Text>
</Card.Body>
</Card>
</Box>
);
export default App;
- After implementing the above within your project, you will have the following output.
My simple app
Hello world
This is a sample paragraph inside a Card component.