@gblock-gg/react

v1.0.2

Published

5 months ago

### Setup Tailwind CSS

Downloads

0High
0Medium
0Low

nonfungiblejc

Getting started

Setup Tailwind CSS

To install Tailwind CSS into your react project, follow the official docs

Install @gblock-gg/react

Run the follow command to install @gblock-gg/react and other needed dependencies:

yarn add @gblock-gg/react react-hook-form

Run the follow command to install @gblock-gg/tailwindcss:

yarn add -D @gblock-gg/tailwindcss

Add the our tailwindcss plugin to tailwind.config.js, and include content from @gblock-gg/react

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    './node_modules/@gblock-gg/react/dist/**/*.js',
  ],
  plugins: [
    // ...
    require('@gblock-gg/tailwindcss'),
  ],
};

Try it out

No you can just import the components you want to use from @gblock-gg/react and use them in a .jsx file:

import { Button } from '@gblock-gg/react';

export default function MyPage() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Next steps

Dark mode

Note: We only support dark theme for next.js projects

Add theme provider component to the root layout or to an existing providers component:

import { ReactNode } from 'react'
import { ThemeProvider } from '@gblock-gg/react/layout'

export default function RootLayouts({ children }: { children: ReactNode }) {
  return (
    <html lang='en'>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

We also provide a theme switch component that you can add to your footer component

import { ThemeSwitch } from '@gblock-gg/react/layout'

export function Footer() {
  return (
    <footer>
      <ThemeSwitch />
    </footer>
  )
}

Or you can add next-themes and use the functions provided by the package:

yarn add next-themes

For more details access the package docs

Toasts

To use toasts you need to install sonner package first:

yarn add sonner

Add the Toaster component from @gblock-gg/react to your root layout or providers components:

import { ReactNode } from 'react'
import { Toaster } from '@gblock-gg/react'

export default function RootLayouts({ children }: { children: ReactNode }) {
  return (
    <html lang='en'>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Now you can fire your toast with the toast() function from sonner package:

import { toast } from 'sonner'
import { Button } from '@gblock-gg/react'

export function MyComponent() {
  return (
    <Button onClick={() => toast('An awesome toast!')}>Show a toast</Button>
  )
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme