matterial
v3.5.5
Published
A React design system made by Matt Berti
Downloads
79
Readme
Matterial UI
A design system by Matt Berti.
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:
// 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>
)
}
Docs
Visit official documentation.
Contributing
Feel free to file a PR if you want to help improve this project. :)
License
Apache 2.0.
Built With
- Ariakit
- React 18
- Typescript
- Sass