Skip to main content

​
NatDS React

A collection of React components from the Natura Design System for building web applications with support for multiple brands (Natura, Avon, Aesop, The Body Shop).
This is the recommended React package for new projects. It replaces the deprecated @naturacosmeticos/natds-web package.

​
Overview

@naturacosmeticos/natds-react provides a comprehensive set of React components built with react-jss for styling. The library includes design tokens, themes, and icons integrated from the Natura Design System.

Components

40+ production-ready React components

Themes

Built-in themes for Natura, Avon, Aesop, and The Body Shop

TypeScript

Full TypeScript support with type definitions

Styling

CSS-in-JS with react-jss

​
Installation

npm install @naturacosmeticos/natds-react

​
What Gets Installed

Installing @naturacosmeticos/natds-react automatically includes:
  • @naturacosmeticos/natds-icons (v1.34.1) - Icon library
  • @naturacosmeticos/natds-themes (v0.84.7) - Design tokens and themes
  • react-jss (v10.9.0) - CSS-in-JS styling solution

​
Requirements

  • React >= 16.8.4
  • React DOM >= 16.8.4
  • Node >= 8.0.0
  • TypeScript >= 2.1 (if using TypeScript)

​
Basic Usage

​
Theme Setup

The ThemeProvider is essential for applying styles correctly. All components must be wrapped in a ThemeProvider. 
import React from 'react'
import { ThemeProvider, Button, buildTheme } from '@naturacosmeticos/natds-react'

// Build theme with brand and mode
const theme = buildTheme('natura', 'light')

function App() {
  return (
    <ThemeProvider theme={theme} cssPrefix="my-app">
      <Button variant="contained">
        Hello World
      </Button>
    </ThemeProvider>
  )
}
​
buildTheme
function
Creates a theme object for the ThemeProvider.Parameters:
  • brand: 'natura' | 'theBodyShop' | 'avon' | 'aesop'
  • mode: 'light' | 'dark'
Always provide a cssPrefix to the ThemeProvider to avoid conflicts with multiple style fonts. Do not override theme palette or tokens - the Design System themes are ready to use.

​
Loading Fonts

​
Roboto Font

Add to your HTML: 
<link 
  href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap" 
  rel="stylesheet" 
/>

​
Brand-Specific Fonts

Each brand has custom fonts that should be loaded: 
<!-- Replace [BRAND] with: avon, natura, aesop, or theBodyShop -->
<link 
  href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-themes@latest/dist/assets/[BRAND]_fonts.css" 
  rel="stylesheet" 
/>

​
Icon Font

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

​
Available Components

The package exports 40+ components:
  • Button - Primary action button with variants
  • GayaButton - Alternative button style
  • Checkbox - Selection control
  • RadioButton - Single choice selection
  • Switch - Toggle control
  • TextField - Text input field
  • Input - Base input component
  • Select - Dropdown selection
  • Autocomplete - Searchable select
  • Rating - Star rating input
  • AppBarTop - Top navigation bar
  • Drawer - Side navigation panel
  • Tab / TabItem - Tab navigation
  • Divider - Content separator
  • Card - Container component
  • Collapse - Expandable content
  • AccordionGroup / AccordionItem - Accordion panels
  • Avatar - User avatar image
  • Badge - Status badge
  • Chip - Compact information display
  • Tag - Label component
  • Image - Optimized image display
  • Typography - Text styling component
  • Logo - Brand logo component
  • Icon - Icon display
  • Alert - Alert messages
  • Snackbar - Toast notifications
  • Dialog - Modal dialogs
  • ProgressIndicator - Loading states
  • Counter - Numeric counter

​
Component Examples

import { Button } from '@naturacosmeticos/natds-react'

function MyComponent() {
  return (
    <>
      <Button variant="contained" color="primary">
        Primary Button
      </Button>
      <Button variant="outlined">
        Outlined Button
      </Button>
      <Button variant="text">
        Text Button
      </Button>
    </>
  )
}

​
Hooks & Utilities

The package also exports useful hooks: 
import { useTheme, createUseStyles } from '@naturacosmeticos/natds-react'

// Access theme in components
function MyComponent() {
  const theme = useTheme()
  return <div style={{ color: theme.color.primary }}>Themed text</div>
}

// Create custom styles with theme
const useStyles = createUseStyles((theme) => ({
  container: {
    padding: theme.spacing.small,
    backgroundColor: theme.color.surface
  }
}))

​
Key Features

1

Multi-Brand Support

Built-in themes for Natura, Avon, Aesop, and The Body Shop brands with consistent API.
2

Dark Mode

Full dark mode support for all components via theme mode configuration.
3

Accessibility

Components built with accessibility best practices and ARIA attributes.
4

TypeScript

Complete type definitions for all components and theme tokens.
5

CSS Prefix

Avoid style conflicts with customizable CSS class prefixes.

​
Comparison with Other Packages

vs natds-web

natds-react is the modern replacement for the deprecated natds-web package. It uses react-jss instead of Material-UI and has a lighter footprint.

vs natds-styles

While natds-styles provides raw design tokens, natds-react includes ready-to-use React components with built-in styling.

​
Resources

Storybook

Browse component examples and documentation

Design Specs

View design specifications on Zero Height

GitHub

Source code and issue tracking

npm Package

View on npm registry

​
Support

  • Version: 2.71.0
  • License: ISC
  • Maintained by: Natura&Co. Design System Team
  • Contact: [email protected]

Report Issues

Found a bug or have a feature request? Open an issue on GitHub.

Build docs developers (and LLMs) love

Get started for freeTalk to us