A design system by Matt Berti.
To begin, install the package in your existing project folder.
npm i matterial
Use Matterial's <Html> and <Body> components in your root layout:
// 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:
// app/page.tsx
import { Page } from 'matterial'
export default function AppPage() {
return <Page>Hello, world</Page>
}Import components to use them in your app:
// 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>
)
}Visit official documentation.
Feel free to file a PR if you want to help improve this project. :)
Apache 2.0.
- Ariakit
- React 18
- Typescript
- Sass