Skip to main content
The Natura Design System (natds-js) provides a comprehensive set of React components for building consistent and accessible user interfaces. All components are built on top of Material-UI and customized with Natura’s brand guidelines.

Installation

npm install @naturacosmeticos/natds-web

Component Categories

Layout Components

Container

Centers content horizontally with responsive max-width control

Grid

Responsive grid layout system with GridContainer and GridItem

Spacing

Utility component for consistent margin and padding

AppBar

Top-level navigation and branding

BottomNavigation

Bottom navigation for mobile interfaces

Breadcrumbs

Navigation breadcrumb trail

Drawer

Side navigation drawer panel

Menu

Dropdown menu component

Tabs

Tabbed navigation interface

Input Components

Button

Primary action button with variants

Checkbox

Checkbox input for selections

Radio

Radio button for single selection

Switch

Toggle switch for on/off states

TextField

Text input field with validation

Select

Dropdown selection input

Display Components

Avatar

User profile image or icon

Badge

Notification badge indicator

Chip

Compact element for tags or filters

Card

Content container with actions

Divider

Visual separator between content

Icon

Icon component with Natura’s icon library

Image

Optimized image display component

Logo

Natura brand logo component

Typography

Text styling with design system tokens

Feedback Components

Dialog

Modal dialog for user interactions

Snackbar

Temporary message notifications

LinearProgress

Linear progress indicator

ProgressIndicator

Circular progress spinner

Skeleton

Loading placeholder skeleton

Tooltip

Contextual information tooltip

Data Display Components

Table

Data table with sorting and pagination

List

Vertical list of items

Rating

Star rating display and input

Tag

Label tag component

Utility Components

CssBaseline

Consistent CSS baseline reset

Collapse

Expandable/collapsible content

ExpansionPanel

Accordion-style expansion panels

Popover

Floating popover container

Getting Started

To use any component, import it from the package:
import { Button, Container, Typography } from '@naturacosmeticos/natds-web';

function App() {
  return (
    <Container>
      <Typography variant="h1">Welcome</Typography>
      <Button variant="contained" color="primary">
        Get Started
      </Button>
    </Container>
  );
}

Theme Provider

Wrap your application with the theme provider to ensure consistent styling:
import { ThemeProvider } from '@naturacosmeticos/natds-web';
import { natura } from '@naturacosmeticos/natds-themes';

function App() {
  return (
    <ThemeProvider theme={natura}>
      {/* Your app components */}
    </ThemeProvider>
  );
}

Accessibility

All components are built with accessibility in mind, following WCAG 2.1 guidelines. They include:
  • Proper ARIA attributes
  • Keyboard navigation support
  • Screen reader compatibility
  • Focus management
  • Semantic HTML structure

TypeScript Support

All components are written in TypeScript and include comprehensive type definitions for props and interfaces.

Build docs developers (and LLMs) love