Natura Design System
A comprehensive React component library by Natura & Co. Build beautiful, accessible applications with our multi-brand design system.
Quick start
Get up and running with Natura Design System in minutes
Install the package
Install the React component library using your preferred package manager:npm install @naturacosmeticos/natds-react
The package requires React 16.8.4 or higher and includes TypeScript definitions.
Set up the theme provider
Wrap your application with the ThemeProvider to enable theming:import { ThemeProvider } from '@naturacosmeticos/natds-react';
function App() {
return (
<ThemeProvider theme="natura">
{/* Your app components */}
</ThemeProvider>
);
}
Choose from multiple brand themes: natura, avon, theBodyShop, or aesop.
Start building with components
Import and use components in your application:import { Button, TextField, Card } from '@naturacosmeticos/natds-react';
function MyComponent() {
return (
<Card>
<TextField label="Email" />
<Button variant="contained">Submit</Button>
</Card>
);
}
Explore by topic
Everything you need to build with Natura Design System
Components
Browse 40+ production-ready React components with full TypeScript support
Theming
Customize your application with multi-brand themes and design tokens
Styling
Learn about styling utilities, hooks, and customization patterns
Icons
Access a comprehensive icon library with multiple sizes and variants
TypeScript
Full type definitions and IntelliSense support for all components
API Reference
Detailed documentation of hooks, utilities, and component APIs
Key features
Why developers choose Natura Design System
Multi-brand theming
Support for Natura, Avon, The Body Shop, and Aesop brands with seamless theme switching
Built-in accessibility
WCAG compliant components with keyboard navigation, ARIA labels, and screen reader support
TypeScript first
Full type definitions, IntelliSense support, and compile-time type checking for all components
Material-UI based
Built on top of Material-UI with custom design tokens and Natura-specific enhancements
Ready to get started?
Join developers from Natura & Co. brands building beautiful applications with our design system.
