open-index/open-npm huggingface dataset:
npm package: @gblo.ch/ts-commons
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.0.1

# ts-commons

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build ts-commons` to build the library.

## Running unit tests

Run `nx test ts-commons` to execute the unit tests via [Jest](https://jestjs.io).
npm package: @gblock-gg/react
Description: ### Setup Tailwind CSS
Latest version: 1.0.2

## Getting started

### Setup Tailwind CSS

To install Tailwind CSS into your react project, follow the [official docs](https://tailwindcss.com/docs/installation/using-postcss)

### Install @gblock-gg/react

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

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

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

```shell
yarn add -D @gblock-gg/tailwindcss
```

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

```js
/** @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:

```tsx
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

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

```tsx
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>
  )
}
```

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

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

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

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

```shell
yarn add next-themes
```

For more details access the [package docs](https://github.com/pacocoursey/next-themes)

#### Toasts

1. To use toasts you need to install [sonner](https://sonner.emilkowal.ski/) package first:

```shell 
yarn add sonner
``` 

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

```tsx
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>
  )
}
```

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

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

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