@floki-inu/react NPM

Getting started

Setup Tailwind CSS

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

Install @floki-inu/react

Run the follow command to install @floki-inu/react and other needed dependencies:

yarn add @floki-inu/react react-hook-form

Run the follow command to install @floki-inu/tailwindcss:

yarn add -D @floki-inu/tailwindcss

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

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

Try it out

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

import { Button } from '@floki-inu/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 '@floki-inu/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 '@floki-inu/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 @floki-inu/react to your root layout or providers components:

import { ReactNode } from 'react'
import { Toaster } from '@floki-inu/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 '@floki-inu/react'

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