# next-md
> minimalistic material design library with next.js in mind
Latest version **0.0.33** (published 2018-04-14) · MIT license · 0 weekly downloads
## Install
```sh
npm install next-md
pnpm add next-md
yarn add next-md
bun add next-md
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.33 |
| Published | 2018-04-14 |
| First published | 2017-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 179.8 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Tucker Connelly |
| Maintainers | tuckerconnelly |
| Keywords | react, material, design, next, next.js |
## Links
- npm: https://www.npmjs.com/package/next-md
- Repository: https://github.com/next-md/next-md
- Homepage: https://github.com/next-md/next-nd.git
- Issues: https://github.com/next-md/next-md/issues
- npm.io page: https://npm.io/package/next-md
## Dependencies (6)
- [color](https://npm.io/package/color.md) ^3.0.0
- [serve](https://npm.io/package/serve.md) ^6.4.8
- [lodash](https://npm.io/package/lodash.md) ^4.17.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [react-portal](https://npm.io/package/react-portal.md) ^4.1.3
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.2.1
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.0.33 (latest) — 2018-04-14
- 0.0.32 — 2018-03-12
- 0.0.31 — 2018-03-09
- 0.0.30 — 2018-03-09
- 0.0.28 — 2018-03-02
- 0.0.27 — 2018-03-01
- 0.0.26 — 2018-02-26
- 0.0.25 — 2018-01-29
- 0.0.24 — 2018-01-28
- 0.0.23 — 2018-01-28
- 0.0.22 — 2018-01-27
- 0.0.21 — 2018-01-19
- 0.0.20 — 2018-01-16
- 0.0.17 — 2018-01-15
- 0.0.16 — 2017-09-25
- … 15 more at https://npm.io/package/next-md/versions
## README
# next-md
next-md is a minimalistic ui library _inspired by_ Material Design for [next.js](https://github.com/zeit/next.js)
## How to use
### Setup
`npm i next-md`
create a `theme.js` in your project root:
```js
import {makeTheme} from 'next-md'
export default makeTheme({
colors: {
primary: '#7ec165',
secondary: '#fe761f'
}
})
export default theme
```
create a [`./pages/_document.js`](https://github.com/zeit/next.js#custom-document) with the Roboto fonts:
```js
import Document, { Head, Main, NextScript } from 'next/document'
import flush from 'styled-jsx/server'
export default class MyDocument extends Document {
static getInitialProps
render () {
return (
{this.props.customValue}
)
}
}
MyDocument.getInitialProps = ({ renderPage }) => {
const {html, head, errorHtml, chunks} = renderPage()
const styles = flush()
return { html, head, errorHtml, chunks, styles }
}
export default MyDocument
```
add a `ThemeProvider` over your pages:
pages/index.js
```
import theme from '../theme'
export default () =>
{/* ... */}
```
## Styles
your `theme` has a bunch of useful styled-jsx snippets and functions in it
### animations
add css transitions to your styled-jsx by importing `animations`:
```js
import {animations} from '../theme'
const MyComponent = () =>
```
the Material Design [animations](https://material.io/guidelines/motion/duration-easing.html) have been condensed to:
- `animations.standard(properties)` for standard transitions
- `animations.large(properties)` for large transitions
- `animations.entrance(properties)` for entrances
- `animations.exit(properties)` for exits
- `animations.tempExit(properties)` for temporary exits
### breakpoints
use the recommended Material Design breakpoints by importing `breakpoints`:
```js
import {breakpoints} from '../theme'
const MyResponsiveComponent = () =>
```
you can use the follow Material Design [breakpoints](https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints):
- breakpoints.xs: (min-width: 480px)
- breakpoints.sm: (min-width: 600px) - Mobile landscape
- breakpoints.ms: (min-width: 840px)
- breakpoints.md: (min-width: 960px) - Tablet
- breakpoints.ml: (min-width: 1280px) - Desktop
- breakpoints.lg: (min-width: 1440px)
- breakpoints.xl: (min-width: 1600px)
### colors
you can use any of the Material Design [colors](https://material.io/guidelines/style/color.html#color-color-palette) by importing `colors`. Your theme colors will also be on this object:
```js
import {colors} from '../theme'
const MyColorfulComponent = () =>
```
### elevations
add shadows to your components by importing `elevations`.
```js
import {elevations} from '../theme'
// Has an elevation of 2
const MyComponent = () =>
// Has an elevation of 16
const MyComponent = () =>
```
### grid
keep your elements on Material Design's 4px grid by using the `g()` function:
```js
import {g} from '../theme'
const MyComponent = () =>
```
## [components storybook](https://next-md.now.sh)
---
_Source: https://npm.io/package/next-md · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._