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

npm install @instabuy/react-ui

Usage

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