Skip to main content

​
NatDS Web

DEPRECATED: This package is no longer maintained and will not receive updates. Use @naturacosmeticos/natds-react for new projects.
React components for web development built on Material-UI.

​
Deprecation Notice

NatDS Web has been discontinued and replaced by @naturacosmeticos/natds-react, which offers:
  • Lighter bundle size
  • Modern styling approach with react-jss
  • Better performance
  • Continued support and updates
  • Same component API for easier migration

Migration Guide

Switch to @naturacosmeticos/natds-react for the latest features and support

​
Overview

@naturacosmeticos/natds-web was the React implementation of Natura Design System built on top of Material-UI v4. While still functional, it no longer receives updates or bug fixes.

​
What’s Included

Installing @naturacosmeticos/natds-web includes:
  • @material-ui/core (v4.12.3) - Base component library
  • @material-ui/icons (v4.11.2) - Material icons
  • @material-ui/lab (v4.0.0-alpha.60) - Experimental components
  • @naturacosmeticos/natds-icons (v1.11.3) - Natura icons
  • @naturacosmeticos/natds-styles (v3.8.3) - Design tokens

​
Installation

Only install this package if maintaining an existing project. For new projects, use @naturacosmeticos/natds-react.
npm install @naturacosmeticos/natds-web

​
Requirements

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

​
Basic Usage

​
Provider Setup

Wrap your application with the Provider component: 
import React from 'react'
import { Button, Provider, buildTheme } from '@naturacosmeticos/natds-web'

const theme = buildTheme('natura', 'light')

function App() {
  return (
    <Provider theme={theme} cssPrefix="my-app">
      <Button color="primary" variant="contained">
        Hello World
      </Button>
    </Provider>
  )
}
​
buildTheme
function
Parameters:
  • brand: 'natura' | 'theBodyShop' | 'avon' | 'aesop'
  • mode: 'light' | 'dark'
  • typography: Optional typography overrides

​
Loading Assets

​
Fonts

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

​
Icons

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

​
Available Components

The package provides 60+ components based on Material-UI:
  • Container - Responsive container
  • GridContainer / GridItem - Grid system
  • Paper / Card - Surface containers
  • AppBar / AppBarHighlight - Top app bar
  • Toolbar - App bar toolbar
  • Divider - Visual separator
  • Spacing - Spacing utility
  • Button / ButtonGroup - Action buttons
  • Checkbox - Checkboxes
  • Radio / RadioGroup - Radio buttons
  • Switch - Toggle switches
  • TextField - Text inputs
  • Input - Base input
  • Select - Dropdown select
  • Fab - Floating action button
  • ToggleButton - Toggle button
  • Counter - Numeric counter
  • Rating - Star rating
  • Field - Field wrapper
  • FormControl - Form control wrapper
  • FormControlLabel - Control label
  • FormHelperText - Helper text
  • InputLabel - Input label
  • InputStateHelpTextProvider - Input state help
  • Avatar - User avatars
  • Badge - Badges and indicators
  • Chip - Compact elements
  • Tag / ContextualBadge - Tags
  • Typography - Text styling
  • Image - Image display
  • Icon - Icons
  • Logo - Brand logos
  • Tooltip - Tooltips
  • Table - Table container
  • TableBody / TableHead / TableFooter - Table sections
  • TableRow / TableCell - Table rows and cells
  • TableContainer - Scrollable container
  • TablePagination - Pagination controls
  • TableSortLabel - Sortable headers
  • Dialog / DialogTitle / DialogContent / DialogActions - Modals
  • DialogContentText - Dialog text
  • Snackbar / SnackbarContent - Toast notifications
  • LinearProgress - Linear progress bar
  • ProgressIndicator / CircularProgress - Loading indicators
  • Skeleton - Loading placeholders
  • List - List container
  • ListItem - List item
  • ListItemText - Item text
  • ListItemIcon - Item icon
  • ListItemAvatar - Item avatar
  • ListItemSecondaryAction - Secondary action
  • ListSubheader - List subheader
  • Card - Card container
  • CardHeader - Card header
  • CardContent - Card content
  • CardActions - Card actions
  • CardMedia - Card media
  • CardActionArea - Clickable area
  • ExpansionPanel - Accordion panel
  • ExpansionPanelSummary - Panel header
  • ExpansionPanelDetails - Panel content
  • ExpansionPanelActions - Panel actions
  • Collapse - Collapsible content
  • Popover - Popover component
  • Intro - Introduction component
  • IconButton - Icon buttons
  • CssBaseline / ScopedCssBaseline - CSS reset

​
Styling Utilities

The package includes Material-UI styling utilities: 
import { makeStyles, createStyles } from '@naturacosmeticos/natds-web'

const useStyles = makeStyles((theme) =>
  createStyles({
    container: {
      padding: theme.spacing(2),
      backgroundColor: theme.palette.background.paper
    }
  })
)

function MyComponent() {
  const classes = useStyles()
  return <div className={classes.container}>Content</div>
}

​
Custom Hook

import { useSizeTokens } from '@naturacosmeticos/natds-web'

function MyComponent() {
  const sizes = useSizeTokens()
  // Access size tokens from theme
}

​
Themes

Access theme configuration: 
import { themes, IThemeWeb } from '@naturacosmeticos/natds-web'

// Access pre-built themes
const naturaTheme = themes.natura.light
const avonTheme = themes.avon.dark

​
Migration to natds-react

1

Install New Package

npm install @naturacosmeticos/natds-react
npm uninstall @naturacosmeticos/natds-web
2

Update Imports

// Old
import { Provider, Button } from '@naturacosmeticos/natds-web'

// New
import { ThemeProvider, Button } from '@naturacosmeticos/natds-react'
3

Update Provider

// Old
<Provider theme={theme} cssPrefix="app">

// New
<ThemeProvider theme={theme} cssPrefix="app">
4

Update Styling

Most components have similar APIs. Check component-specific docs for any breaking changes.

​
Documentation

The Storybook documentation for this package is no longer maintained.

GitHub

View source code

npm Package

View on npm

Troubleshooting

Common issues and solutions

Migrate to natds-react

Switch to the supported package

​
Package Info

  • Version: 4.7.4
  • Status: Deprecated - No longer maintained
  • License: ISC
  • Maintained by: Natura & Co.
For questions about existing implementations, check the GitHub issues.

Build docs developers (and LLMs) love

Get started for freeTalk to us