Forest UI

Forest Design System — A multi-tenant MUI v7 + Emotion component library.

Installation

npm install @matteoaliano/forest-ui

Quick Start

import { ForestProvider, Button, Typography } from '@matteoaliano/forest-ui';
import '@fontsource/poppins'; // or load Aeonik font

function App() {
  return (
    <ForestProvider>
      <Typography variant="h1">Hello Forest</Typography>
      <Button variant="contained">Click me</Button>
    </ForestProvider>
  );
}

Theme Presets

Three presets are available:

| Preset | Use Case | |--------|----------| | forest-agency | Internal tools + partner agencies (default) | | forest-external | Client-facing products | | forest-internal | Internal tools |

Using a Preset

import { ForestProvider } from '@matteoaliano/forest-ui';

<ForestProvider preset="forest-external">
  {/* Your app */}
</ForestProvider>

Using a Custom Theme

import { ForestProvider, buildTheme } from '@matteoaliano/forest-ui';
import { getPreset } from '@matteoaliano/forest-ui';

const preset = getPreset('forest-agency');
const theme = buildTheme(preset.variants.light.tokens);

<ForestProvider theme={theme}>
  {/* Your app */}
</ForestProvider>

Components

40+ wrapped MUI components with Forest defaults. See Storybook for all components.

Inputs

• Button, ButtonGroup
• TextField, Select, MultiSelect
• Checkbox, RadioGroup, Switch
• ToggleButton
• DatePicker
• Autocomplete
• Search

Data Display

• Typography
• Table, DataGrid
• Chip, Badge
• Tooltip
• List
• Divider
• Skeleton

Surfaces

• Card, Paper
• AppBar
• Accordion

Feedback

• Alert, Snackbar
• Dialog, Modal, Popover
• Progress (Linear, Circular)
• Backdrop

Navigation

• Tabs, Stepper
• Pagination
• Breadcrumbs
• Link
• Menu
• SidebarNav

Charts

• LineChart, BarChart, PieChart

Development

# Install dependencies
npm install

# Build
npm run build

# Run tests
npm test

# Storybook
npm run storybook

License

MIT