Skip to main content

​
Installation

This guide will help you install and set up the Natura Design System in your React project.

​
Prerequisites

Before installing, ensure your project meets these requirements:
Required: React >= 16.8.4 and React DOM >= 16.8.4 are peer dependencies and must be installed in your project.
  • React: Version 16.8.4 or higher
  • React DOM: Version 16.8.4 or higher
  • Node.js: Version 8.0.0 or higher (recommended)
  • TypeScript: Version 2.1 or higher (optional, for TypeScript projects)

​
Install the Package

Choose your preferred package manager to install @naturacosmeticos/natds-react: 
npm install @naturacosmeticos/natds-react
Installing @naturacosmeticos/natds-react automatically installs these dependencies:
  • @naturacosmeticos/natds-themes - Design tokens and themes
  • @naturacosmeticos/natds-icons - Icon library
  • react-jss - CSS-in-JS styling engine

​
Install Required Fonts

The design system requires specific fonts to render correctly. You need to load both Roboto (base font) and brand-specific fonts.

​
Roboto Font (Required)

Add the Roboto font with weights 400 and 500 to your index.html:
index.html
<link 
  href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap" 
  rel="stylesheet" 
/>
The design system references Roboto font family names but does not bundle the font files. You must load them separately.

​
Brand-Specific Fonts (Required)

Each brand (Natura, Avon, The Body Shop, Aesop) has custom fonts that must be loaded. Add the appropriate font file to your index.html based on your brand: 
<link 
  href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-themes@latest/dist/assets/natura_fonts.css" 
  rel="stylesheet" 
/>

​
Install Icon Fonts

The design system uses icon fonts from @naturacosmeticos/natds-icons. You can load them via CDN or import from node_modules.

​
Option 1: CDN (Recommended)

Add this to your index.html:
index.html
<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@latest/dist/natds-icons.css"
>

​
Option 2: Import from node_modules

Import the CSS file in your application entry point:
main.js
import '@naturacosmeticos/natds-icons/natds-icons.css'
Using the CDN approach is simpler and ensures you always get the latest icons, but importing from node_modules gives you more control over versioning.

​
Verify Installation

After installation, verify that all packages are installed correctly: 
npm list @naturacosmeticos/natds-react
You should see output similar to: 
@naturacosmeticos/[email protected]
├── @naturacosmeticos/[email protected]
├── @naturacosmeticos/[email protected]
└── [email protected]

​
TypeScript Configuration (Optional)

If you’re using TypeScript, the package includes full type definitions. No additional configuration is needed, but ensure your tsconfig.json has:
tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "jsx": "react",
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

​
Complete HTML Setup Example

Here’s a complete example of index.html with all required resources:
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Natura App</title>
    
    <!-- Roboto Font -->
    <link 
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap" 
      rel="stylesheet" 
    />
    
    <!-- Natura Brand Font (change based on your brand) -->
    <link 
      href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-themes@latest/dist/assets/natura_fonts.css" 
      rel="stylesheet" 
    />
    
    <!-- Natura Icons -->
    <link 
      rel="stylesheet" 
      href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@latest/dist/natds-icons.css"
    >
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

​
Troubleshooting

Common Issues:
  • Missing fonts: Ensure both Roboto and brand fonts are loaded
  • Icon not showing: Verify natds-icons.css is loaded
  • Style conflicts: Make sure to use cssPrefix prop with ThemeProvider
  • React version mismatch: Ensure React >= 16.8.4
For more troubleshooting help, see the Troubleshooting Guide.

​
Next Steps

Quick Start Guide

Learn how to configure the ThemeProvider and start using components

Build docs developers (and LLMs) love

Get started for freeTalk to us