Instabuy React-UI

Instabuy's React Component Library is a one-stop shop for building accessible and stylish web applications. Built on top of @ark-ui/react, this library provides a comprehensive set of reusable React components that prioritize accessibility, along with custom hooks and global CSS tokens. By resetting browser defaults and offering SVG components, this library aims to be the sole dependency needed for your next Instabuy project, ensuring consistency, accessibility, and a streamlined development workflow.

Installation

1npm install @instabuy/react-ui

Usage

1import { ThemeProvider, Button } from "@instabuy/react-ui";
2
3function App() {
4  return (
5    <ThemeProvider
6      theme={{
7        colors: {
8          primary: {
9            main: "#43b02a", // The main color of your theme
10            on: "#FFFFFF", // The color of text and icons that appear on top of the primary color
11          },
12          background: {
13            main: "#FFFFFF", // The color of the background of the page
14            on: "#1b1b1b", // The color of text and icons that appear on top of the background color
15          },
16          surface: {
17            main: "#f9f9f9", // The color of surfaces like cards and modals
18            on: "#1b1b1b", // The color of text and icons that appear on top of the surface color
19          },
20        },
21      }}
22    >
23      {/* The components componets */}
24      <Button>Click me</Button>
25    </ThemeProvider>
26  );
27}

Documentação

You can access the documentation at Storybook