https://github.com/sangupta/bedrock
Bedrock React Component Library
https://github.com/sangupta/bedrock
bootstrap component-library react react-component-library react-components typescript typescript-library
Last synced: about 1 month ago
JSON representation
Bedrock React Component Library
- Host: GitHub
- URL: https://github.com/sangupta/bedrock
- Owner: sangupta
- License: mit
- Created: 2019-06-11T17:32:33.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2025-06-10T05:06:52.000Z (9 months ago)
- Last Synced: 2025-06-10T05:27:41.079Z (9 months ago)
- Topics: bootstrap, component-library, react, react-component-library, react-components, typescript, typescript-library
- Language: TypeScript
- Homepage: https://bedrock.sangupta.com
- Size: 1.57 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 81
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bedrock React Components
[](https://github.com/sangupta/bedrock/actions/workflows/ci.yml)
[](https://coveralls.io/github/sangupta/bedrock?branch=main)
Bedrock is a [ReactJS][reactjs] UI component library built using [Typescript][typescript].
It uses [Bootstrap 5][bootstrap] CSS framework for styling. `bedrock` still follows the
classic way of including CSS in HTML file to decouple the design system from component
library and also to improve load performance by leveraging browser caching. The library
is published as browser-compatible ESM version. Thus, you can directly leverage the
component library in your `importmap` and point it to the latest version.
## Technical notes
* The `bedrock.css` file includes all definitions from the corresponding `bootstrap.css` file
and thus including `bedrock.css` should be sufficient in your project.
* The library is built and tested against the latest versions (as of date):
* React 18.2.0 (runtime dependency)
* Bootstrap 5.2.3 (dev dependency)
* Node 20 (dev dependency)
* CSS file needs to be currently manually included in your `index.html` file. In future,
once **CSS import assertions** `import styles from './bedrock.css' assert { type: 'css }`
become available, this requirement will be removed.
## Usage
1. Add `@sangupta/bedrock` as a dependency in your `package.json`
2. Update dependencies as:
```sh
# using npm
$ npm install --save @sangupta/bedrock
# using yarn
$ yarn add @sangupta/bedrock
```
3. Include the `bedrock.css` file in your project. You have several options:
**Option A: Include in your `index.html` file:**
```html
```
**Option B: Import in your main CSS/SCSS file:**
```css
@import '@sangupta/bedrock/css';
```
**Option C: Import in your JavaScript entry point (if your bundler supports CSS imports):**
```js
import '@sangupta/bedrock/css';
```
**Option D: Direct path import:**
```js
import '@sangupta/bedrock/dist/bedrock.css';
```
4. Use the components in your application:
```js
import React from 'react';
import { Button } from '@sangupta/bedrock';
const HelloWorld = () => {
return
}
// for React 16/17
import ReactDOM from 'react-dom';
ReactDOM.render(, document.getElementById('root'));
// for React 18
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container!);
root.render();
```
## License
MIT License. Copyright (c) 2022, Sandeep Gupta.
[reactjs]: https://reactjs.org/
[typescript]: https://www.typescriptlang.org/
[bootstrap]: https://getbootstrap.com/