Miss any of our Open RFC calls?Watch the recordings here! »

material-ui-bootstrap

1.0.15 • Public • Published

material-ui-bootstrap

npm version Build Status

If you prefer the Material UI api but also like Bootstrap's clean buttons and useful color variants then this package is here for you. It wraps material-ui's <Button> and <Card> and <Typography> components and adds a new component <Alert>. Inspired by https://react-bootstrap.github.io.

DEMO HERE

Install

# npm 
npm i material-ui-bootstrap

Button

Drop this in place of the material-ui Button. You may use the following color props: primary, secondary, success, danger, warning, info, light, dark.

import React from "react"
import { Button } from "material-ui-bootstrap"
 
export default function App() {
  return (
    <Button color="success" variant="contained">
      Success
    </Button>
  )
}

Alert

import React from "react"
import { Alert } from "material-ui-bootstrap"
 
export default function App() {
  return (
    <Alert color="danger">
      <Alert.Heading>Heading</Alert.Heading>
      Alert danger
    </Alert>
  )
}

Typography

import React from "react"
import { Typography } from "material-ui-bootstrap"
 
export default function TypographyExample() {
  return <Typography color="success">Example</Typography>
}

Card

import React from "react"
import Card, { CardContent, CardHeader, CardTitle } from "material-ui-bootstrap"
 
export default function CardExample() {
  return (
    <Card color="success">
      <CardHeader>CardHeader</CardHeader>
      <CardContent>
        <CardTitle>Title</CardTitle>
        Example card content.
      </CardContent>
    </Card>
  )
}

Keywords

none

Install

npm i material-ui-bootstrap

DownloadsWeekly Downloads

39

Version

1.0.15

License

MIT

Unpacked Size

150 kB

Total Files

69

Last publish

Collaborators

  • avatar