https://github.com/ustudioteam/brix-ui
☄️ The library of reusable UI components for React, made in minimalistic and light style, adopting modern technologies and approaches.
https://github.com/ustudioteam/brix-ui
lerna react styled-components ui ui-components ui-kit
Last synced: 3 months ago
JSON representation
☄️ The library of reusable UI components for React, made in minimalistic and light style, adopting modern technologies and approaches.
- Host: GitHub
- URL: https://github.com/ustudioteam/brix-ui
- Owner: uStudioTeam
- License: mit
- Created: 2020-03-11T13:49:35.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T02:58:58.000Z (almost 3 years ago)
- Last Synced: 2025-06-26T21:10:43.265Z (4 months ago)
- Topics: lerna, react, styled-components, ui, ui-components, ui-kit
- Language: TypeScript
- Homepage: https://ustudioteam.github.io/brix-ui/
- Size: 15.6 MB
- Stars: 58
- Watchers: 3
- Forks: 3
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Brix UI
[](https://lerna.js.org/)
[](https://github.com/styled-components/styled-components)
Minimal UI framework for React built with [TypeScript](https://github.com/microsoft/TypeScript) and [styled-components](https://github.com/styled-components/styled-components).
---
Brix UI is shipping several packages:
- [`contexts`](packages/contexts/README.md)
- [`core`](packages/core/README.md)
- [`grid`](packages/grid/README.md)
- [`hooks`](packages/hooks/README.md)
- [`icons`](packages/icons/README.md)
- [`prop-types`](packages/prop-types/README.md)
- [`theme`](packages/theme/README.md)
- [`types`](packages/types/README.md)
- [`utils`](packages/utils/README.md)
Some of these are not intended to be used directly but are required for the others to work.
Most common use-case for Brix UI would be installing the `core` package which provides full-on experience of the framework.
## Installation
```shell script
npm i @brix-ui/core # styled-components react react-dom
```
```shell script
yarn add @brix-ui/core # styled-components react react-dom
```
> Make sure to have `react`, `react-dom` and `styled-components` installed in your package as they are included in our peer dependencies.
## Usage
Before writing any components in your application make sure to provide them with our theme.
This is done by wrapping your application in our `ThemeProvider` component.
```typescript jsx
import ThemeProvider from '@brix-ui/theme';
ReactDOM.render(
document.querySelector('#root'),
);
```
> More examples can be found in the [`theme`](packages/theme/README.md) package readme.
After that, you are ready to use our framework inside of your application!
```typescript jsx
// Please note that in most cases we provide direct default exports for better tree-shaking support.
import Button from '@brix-ui/core/button';
```
Live demo can be found [here](https://brix-ui-showcase.vercel.app/) ([GitHub](https://github.com/drizzer14/brix-ui-showcase)).
## Contributing
We are open for your suggestions and contributions to this project. In order to properly help us get better
please refer to the [contributing](CONTRIBUTING.md) and [code of conduct](CODE_OF_CONDUCT.md) documents.
## History
This package continues the story of [`ustudio-ui`](https://github.com/uStudioCompany/ustudio-ui) – our first attempt at creating a UI library for React.
`ustudio-ui` generally met our requirements yet leaving much room for improvement.
Here we made an attemt to completely rewrite the first version of our library, redesigning components and rethinking
all the code and architecture in the process.
Brix UI was made in the country of Ukraine by these lovely members and ex-members
of the [uStudio](https://github.com/uStudioCompany) company:
