# matterial

> A React design system made by Matt Berti

Latest version **3.5.5** (published 2024-03-14) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install matterial
pnpm add matterial
yarn add matterial
bun add matterial
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.5.5 |
| Published | 2024-03-14 |
| First published | 2022-03-27 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14.16 |
| Dependencies | 3 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Matt Berti |
| Maintainers | dr-spaceman |

## Links

- npm: https://www.npmjs.com/package/matterial
- Repository: https://github.com/dr-spaceman/matterial
- Homepage: https://matterial.brti.dev/
- Issues: https://github.com/dr-spaceman/matterial/issues
- npm.io page: https://npm.io/package/matterial

## Dependencies (3)

- [sass](https://npm.io/package/sass.md) ^1.51.0
- [react-icons](https://npm.io/package/react-icons.md) ^4.12.0
- [@ariakit/react](https://npm.io/package/@ariakit/react.md) ^0.3.10

## Recent versions

- 3.5.5 (latest) — 2024-03-14
- 3.5.4 — 2024-02-26
- 3.5.3 — 2024-02-23
- 3.5.2 — 2024-02-20
- 3.5.1 — 2024-02-14
- 3.4.2 — 2024-02-13
- 3.4.1 — 2024-02-12
- 3.4.0 — 2024-02-12
- 3.3.4 — 2024-02-11
- 3.3.3 — 2024-02-03
- 3.3.2 — 2024-02-03
- 3.3.1 — 2024-02-02
- 3.3.0 — 2024-02-01
- 3.2.6 — 2024-01-21
- 3.2.5 — 2024-01-18
- … 46 more at https://npm.io/package/matterial/versions

## README

# Matterial UI

A design system by [Matt Berti](https://brti.dev).

## Setup

To begin, install the package in your existing project folder.

`npm i matterial`

Use Matterial's `<Html>` and `<Body>` components in your root layout:

```jsx
// app/layout.tsx

import { Html, Body } from 'matterial'
import 'src/styles/main.scss' // Your additional styles

export default function Layout({ children }) {
  return (
    <Html>
      <Body>{children}</Body>
    </Html>
  )
}
```

Use Matterial's `<Page>` component in your page:

```jsx
// app/page.tsx

import { Page } from 'matterial'

export default function AppPage() {
  return <Page>Hello, world</Page>
}
```

Import components to use them in your app:

```jsx
// src/components/my-component.tsx

import { Button, Container } from 'matterial'

export default function MyComponent() {
  return (
    <Container row>
      <Button variant="contained" color="primary">
        Foo
      </Button>
      <Button variant="contained" color="secondary">
        Bar
      </Button>
    </Container>
  )
}
```

## Docs

Visit official [documentation](https://matterial.brti.dev).

## Contributing

Feel free to file a PR if you want to help improve this project. :)

## License

Apache 2.0.

## Built With

- [Ariakit](https://ariakit.org/)
- React 18
- Typescript
- Sass

## Used to Build

- [brti.dev](https://brti.dev)
- [Boat Dadddy](https://boatdaddy.app)

---
_Source: https://npm.io/package/matterial · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._