# @vibe/core
> Vibe Design System's Core Component Library in React
## Usage
Components are imported from the library's root entry:
```javascript
import { Button } from "@vibe/core";
```
### Global CSS Setup
Vibe components require `box-sizing: border-box` to be applied globally. Add the following to your root stylesheet:
```css
*,
*::before,
*::after {
box-sizing: border-box;
}
```
### Font installation
We don't import fonts ourselves, we work best with the following fonts -
Poppins, Figtree and Roboto, we recommend adding the following `link` import to your application
```html
```
## Theming
Theming is supported using CSS variables - for more info on theming please read the [theme guidelines](./docs/theming.md) file.
## Experimental SSR (Server Side Rendering)
Components are using style injection on the client side (into element)
This is not usable on the server side.
In order to get the required styles on the server side, you should initialize
```javascript
globalThis.injectedStyles = {};
```
in order to have each server side render component css inserted into the injectedStyles object
each component will insert its css string under a unique key.
Then you can join all the values into one string and add it under a `
> Vibe Design System's Core Component Library in React
## Usage
Components are imported from the library's root entry:
```javascript
import { Button } from "@vibe/core";
```
### Global CSS Setup
Vibe components require `box-sizing: border-box` to be applied globally. Add the following to your root stylesheet:
```css
*,
*::before,
*::after {
box-sizing: border-box;
}
```
### Font installation
We don't import fonts ourselves, we work best with the following fonts -
Poppins, Figtree and Roboto, we recommend adding the following `link` import to your application
```html
```
## Theming
Theming is supported using CSS variables - for more info on theming please read the [theme guidelines](./docs/theming.md) file.
## Experimental SSR (Server Side Rendering)
Components are using style injection on the client side (into element)
This is not usable on the server side.
In order to get the required styles on the server side, you should initialize
```javascript
globalThis.injectedStyles = {};
```
in order to have each server side render component css inserted into the injectedStyles object
each component will insert its css string under a unique key.
Then you can join all the values into one string and add it under a `