Getting started

Install in your project

Open your app in a terminal and run

# With npm
npm i @julseb-lib/react

# With yarn
yarn add @julseb-lib/react

For every component we are using Tailwind CSS.

Open your main. and add this line at the top:

import "@julseb-lib/react/index.css"

All icons used in this library come from Boxicons, and are used with React Icons.

import { BiChevronLeft } from "react-icons/bi"

To override all variables, create a .css file, and import it in your main. file after the library CSS file:

import "@julseb-lib/react/index.css"
import "styles/<name of overrides file>.css"

Then, in your new css file, create a :root element and change the variables:

:root {
	--color-primary-500: #445BE4;
}

Thanks to Tailwind CSS, you can easily style your components. For example, if you want to change the padding on a Button element:

import { clsx } from "@julseb-lib/react"

<Button className={clsx("px-6")}>Button</Button>

The Tailwind CSS file is included in @julseb-lib/react/index.css, so you don't need to include it yourself.

For TypeScript users, you can import types in needed components with this file:

import type { Type } from "@julseb-lib/react/types"

Or, if you want to extend props from any component:

import type { Type } from "@julseb-lib/react/component-props"