open-index/open-npm huggingface dataset:
npm package: @instabuy/react-ui
Description: 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 cus
Latest version: 2.9.1

# 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

```bash
npm install @instabuy/react-ui
```

## Usage

```jsx
import { ThemeProvider, Button } from "@instabuy/react-ui";

function App() {
  return (
    <ThemeProvider
      theme={{
        colors: {
          primary: {
            main: "#43b02a", // The main color of your theme
            on: "#FFFFFF", // The color of text and icons that appear on top of the primary color
          },
          background: {
            main: "#FFFFFF", // The color of the background of the page
            on: "#1b1b1b", // The color of text and icons that appear on top of the background color
          },
          surface: {
            main: "#f9f9f9", // The color of surfaces like cards and modals
            on: "#1b1b1b", // The color of text and icons that appear on top of the surface color
          },
        },
      }}
    >
      {/* The components componets */}
      <Button>Click me</Button>
    </ThemeProvider>
  );
}
```

## Documentação

You can access the documentation at [Storybook](storybook-react-ui.instabuy.com.br)