The bootstrap components made with styled-components.
I wanted to use bootstrap with React for fast prototypes, or as entrypoint for my own UI Component Library, or if I needed just one bootstrap component for my application, now I can simply install that specific component. To work with ease with any other libary or framework these components are built with styled-components.
I also wanted to learn a bit more on how CSS works and on how to build a CSS UI Library from scratch, mostly but not only by reading the bootstrap CSS code and the MDN web docs. I also wanted to learn how to manage and maintain a monorepo with multiple packages based on lerna.
You can install all bootstrap components with...
Note: every component has a peer dependency on
styled-componentsandstyled-system. To use this components you also need tonpm i styled-components styled-system -S.
$ npm i styled-bootstrap-components -Sor
$ yarn add styled-bootstrap-componentsor you can install just the components that you need by following the installation guides in the components section.
For detailed information (also on how to customize this components) take a look at the documentation.
Most of this components are using styled-system.
To see which components are available take a look at the components section.
// whatever components you need
import { Button } from 'styled-bootstrap-components';
export const myComponent = (props) => (
<Button>Hello, World!</Button>
);For detailed information take a look at the documentation.
- Alert Component
- Badge Component
- Base Components
- Breadcrumb Component
- Button Component
- Card Component
- Container Component
- Dropdown Component
- Form Component
- Grid Component
- Jumbotron Component
- Listgroup Component
- Modal Component
- Nav Component
- Navbar Component
- Popover Component
- Table Component
- Tooltip Component
MIT © Lukas Aichbauer