This repository uses the following :
pnpmas a package managerPanda-cssas CSS-in-JS libraryTsupas build toolStorybookfor visual testingTypeScriptfor static type checkingESLintfor code lintingPrettierfor code formatting
This repository contains the following packages :
@gganbu-org/react– Core components library@gganbu-org/hooks– Collection of hooks for React Hooks for Gganbu UI components@gganbu-org/utils– Collection of Common utilities for Gganbu UI@gganbu-org/styled– Styled API for creating component styling@gganbu-org/styled-utils– CSS utilities for the Gganbu Design System@gganbu-org/theme– A preset for Panda CSS that contains Gganbu Design System's branding
To use Gganbu UI components, all you need to do is install the
@gganbu-ui/react package and its peer dependencies:
# with pnpm
$ pnpm add @gganbu-org/react
# with Yarn
$ yarn add @gganbu-org/react
# with npm
$ npm i @gganbu-org/reactTo start using the components, please follow these steps:
- Import the entry CSS in your src/app/layout.tsx file as follows:
import '@gganbu-org/styled/styles.css';
export default function RootLayout({
children,
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}Optionally, you can wrap your application with the GganbuProvider so you
can toggle between light and dark mode within your app.
- Now you can start using components the following snippet:
import { Button } from "@gganbu-org/react"
function Example() {
return <Button variant='solid'>Hello 🐼!</Button>
}MIT License