aichbauer / Styled Bootstrap Components
Licence: mit
The bootstrap components made with styled-components 💅
Stars: ✭ 196
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Styled Bootstrap Components
rebass
⚛️ React primitive UI components built with styled-system.
Stars: ✭ 7,844 (+3902.04%)
Mutual labels: grid, styled-components, layout, react-components, design-system
Primereact
The Most Complete React UI Component Library
Stars: ✭ 2,393 (+1120.92%)
Mutual labels: grid, react-components, bootstrap
smores-react
🍭 Marshmallow React components
Stars: ✭ 34 (-82.65%)
Mutual labels: styled-components, react-components, design-system
Styled Bootstrap
💅🏻 A styled-component implementation of Bootstrap
Stars: ✭ 154 (-21.43%)
Mutual labels: react-components, bootstrap, styled-components
Ui
React Styled Components with bootstrap grid system
Stars: ✭ 89 (-54.59%)
Mutual labels: react-components, bootstrap, styled-components
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+960.71%)
Mutual labels: layout, grid, styled-components
Interior
Design system for the modern web.
Stars: ✭ 77 (-60.71%)
Mutual labels: layout, design-system, grid
Re Jok
A React UI Component library built with styled-components
Stars: ✭ 102 (-47.96%)
Mutual labels: grid, react-components, styled-components
Tabler React
React components and demo for the Tabler UI theme.
Stars: ✭ 1,830 (+833.67%)
Mutual labels: react-components, bootstrap
Styleguide
The VTEX Design System and React component library.
Stars: ✭ 138 (-29.59%)
Mutual labels: design-system, react-components
Reactour
Tourist Guide into your React Components
Stars: ✭ 2,782 (+1319.39%)
Mutual labels: react-components, styled-components
Popo
PoPo is the grid layout tool, the best choice for runtime layout.
Stars: ✭ 130 (-33.67%)
Mutual labels: layout, grid
Fluid System
Fluid System is a style props function transformer for generating fluid styles. 💦
Stars: ✭ 130 (-33.67%)
Mutual labels: design-system, styled-components
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (-19.9%)
Mutual labels: grid, styled-components
Devextreme Reactive
Business React components for Bootstrap and Material-UI
Stars: ✭ 1,800 (+818.37%)
Mutual labels: react-components, bootstrap
React
Modern and minimalist React UI library.
Stars: ✭ 2,546 (+1198.98%)
Mutual labels: design-system, react-components
Shine Design
为开发者、设计师和产品经理准备的 UI 设计语言
Stars: ✭ 157 (-19.9%)
Mutual labels: design-system, react-components
Bedrock
Foundational Layout Primitives for your React App
Stars: ✭ 173 (-11.73%)
Mutual labels: layout, styled-components
Shuffle
Categorize, sort, and filter a responsive grid of items
Stars: ✭ 2,170 (+1007.14%)
Mutual labels: layout, grid
styled-bootstrap-components
The bootstrap components made with styled-components.
Table of Contents
Why?
- I wanted to use bootstrap with React for fast prototypes, or as an 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 library or framework these components are built with styled-components.
- I 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 wanted to learn how to manage and maintain a monorepo with multiple packages based on lerna.
Installation
You can install all bootstrap components with...
Note: every component has a peer dependency on
styled-components
> v4. To use these components you also need tonpm i styled-components -S
.
$ npm i styled-bootstrap-components -S
or
$ yarn add styled-bootstrap-components
or you can install just the components that you need by following the installation guides in the components section.
Usage
For detailed information (also on how to customize these components) take a look at the documentation.
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>
);
Components
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
Related
License
MIT © Lukas Aichbauer
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].