Skip to content

Matterial UI

  • Homepage
  • Setup
  • Page layout
Components
  • Alert
  • Avatar
  • Badge
  • Button
  • Check button
  • Checkbox
  • Container
  • Dialog
  • Form
  • Icon
  • Link
  • Loader
  • Menu
  • Skip nav
  • Tooltip
  • Visually hidden

Setup

To begin, install the package.

npm i matterial

Use Matterial's <Html> and <Body> components in your 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>
  )
}