material-ui-bootstrap
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • 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

    CHANGELOG.md

    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>
      )
    }

    Label

    import React from "react"
    import { Label } from "material-ui-bootstrap"
    
    export default function LabelExample() {
      return <Label color="info">Example</Label>
    }

    Panel

    import React from "react"
    import { Panel, PanelBody, PanelHeader } from "material-ui-bootstrap"
    
    export default function PanelExample() {
      return (
        <Panel color="info">
          <PanelHeader>Header</PanelHeader>
          <PanelBody>Body</PanelBody>
        </Panel>
      )
    }

    Keywords

    none

    Install

    npm i material-ui-bootstrap

    DownloadsWeekly Downloads

    12

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    188 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar