@gryt/ui

Preview here

Install

npm i @gryt/ui @tailwindcss/typography tailwind daisyui

or

yarn add @gryt/ui @tailwindcss/typography tailwind daisyui

Tailwind configuration

// tailwind.config.js

module.exports = {
    content: [
      // ...
      "./node_modules/@gryt/**/*.{js,ts}",
    ],
    presets: [
      // ...
      require('@gryt/ui/tailwind')
    ]
    // ...
  }

Styling

// _app.tsx

import { AppProps } from 'next/app';
import "@gryt/ui/style.scss";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Usage

Button

// somepage.tsx

import React, { Component } from 'react'
import { Button } from '@gryt/ui'

export default function SomePage() {
  return (
      <div>
        <h1 className="text-2xl font-bold text-primary">Welcome!</h1>
        <Button>Click me!</Button>
      </div>
  );
}

Developing new components

Clone this repository and follow the steps below.

Preparation

Use the dev folder.

cd dev

Install dependencies

yarn

or

npm i

Start development server

yarn dev

or

npm run dev

Publish changes

Use np

yarn global add np
np

License

MIT © Gryt-chat