Brif UI logo
0.0.51

Installation

Welcome to the BrifUI documentation 👋

Requirement

Installation

1. Install BrifUI dependencies
1npm install @brifui/components @brifui/styled --save
2npm install @brifui/theme @brifui/cli --save-dev
2. Create brifui.config.js or brifui.config.ts if you use typescript
1import { defineConfig } from "@brifui/theme"
2
3export default defineConfig({
4  include: [
5    "<path_to_your_app_folder>/**/*.{ts,tsx,js,jsx}",
6    "<path_to_your_node_modules>/@brifui/**/*.{ts,tsx,js,jsx}"
7  ],
8})
Include all of the paths of your React components in the include section of the brifui.config.ts file. So the CLI could generate the minimal styles needed for your application.
3. Added `codegen` command to your package.json
1{
2  ...
3  "scripts": {
4    "prepare": "brif codegen"
5  },
6  ...
7}
The prepare script that will run codegen after dependency installation which will read your Brif UI configuration and generate the styled system of your project at @brifui/styled package.
4. Create postcss.config.cjs file at the root of your project.
1module.exports = {
2  plugins: {
3    "@brifui/theme/postcss": {}
4  }
5}
5. Added this line to the global css file of your project.
1@layer reset, base, tokens, recipes, utilities;
Make sure to import your global css file in your application root.
1import "./global.css"
2
3export const RootComponent = () => {
4...
6. You can now start to use BrifUI component and styled system 🥳
1import { Button } from "@brifui/components"
2import { css } from "@brifui/styled"
3
4export const Example = () => (
5  <Button css={css.raw({
6    width: '100%'
7  })}>
8    Solid
9  </Button>
10)

FAQ