@jinni-labs/ui

Jinni UI is an open-source React component library. It maintains a consistent design through a built-in design system while allowing for flexible customization to suit your project.

Documentation

• Storybook
• Github Repo

Installation

Install the package in your project directory with:

npm install @jinni-labs/ui

Get Started

1. Wrap your application with the JinniProvider component:

   import { StrictMode } from "react";
   import { createRoot } from "react-dom/client";
   import App from "./App";
   import JinniProvider, {
     createDesignSystem,
   } from "@jinni-labs/ui/JinniProvider";
   
   const designSystem = createDesignSystem();
   
   createRoot(document.getElementById("root")).render(
     <StrictMode>
       <JinniProvider designSystem={designSystem}>
         <App />
       </JinniProvider>
     </StrictMode>,
   );

2. Start using components:

   import Button from "@jinni-labs/ui/Button";
   
   const App = () => {
     return <Button>Simple</Button>;
   };
   
   export default App;