@grana-ui/core

Introduction

Built specifically for use with React and Tailwind CSS, grana-UI offers a range of accessible, highly customizable components that can be easily integrated into any react project. grana-UI comes with a set of default styles that can be easily customized using Tailwind CSS classes. Furthermore, each component can be parameterized using a set of props that can be used to change the default styles of the component.

Installation

grana-UI is available as an NPM package and can be installed using the following command:

npm install @grana-ui/core

Configuration

grana-UI is designed to be used with React and Tailwind CSS. To use grana-UI, you must first install ReactJS and Tailwind CSS in your project. Furthermore, you must also install the following NPM packages:

npm install tailwind-scrollbar @tailwindcss/forms @tailwindcss/typography

After having installed Tailwind CSS, you must configure it to work with grana-UI. To do this, you must first create a tailwind.config.js file in the root directory of your project. Then, add the following code to that config file:

It is highly recommended to add only the needed style files to avoid having a bloated css file

module.exports = {
  content: [
    './src/**/*.{html,jsx,tsx}',
    // you can either add all styles
    './node_modules/@grana-ui/core/dist/theme/styles/*.js',
    // OR you can add only the styles you need
    './node_modules/@grana-ui/core/dist/theme/styles/Button.styles.js',
    './node_modules/@grana-ui/core/dist/theme/styles/Text.styles.js',
  ],
  plugins: [
    require('@tailwindcss/typography'),
    require('tailwind-scrollbar')({ nocompatible: true }),
    require('@tailwindcss/forms')({
      strategy: 'class', // only generate classes
    }),
  ],
};

Usage

To start using grana-UI components just add the following import statement to the top of your React component:

import { Button } from '@grana-ui/core';

Then, you can use the component in your JSX code:

<Button>Click Me</Button>

Properties

Each component has a set of default styles that can be parameterized using the corresponding props. For example, the Button component has a default blue color and a medium size. These values can be changed by setting the color and size props to the component:

<Button color="black" size="sm">
  Click Me
</Button>

Moreover, the style of a component can be customized by passing the normal className prop to it. This prop can be used to override the default styles of the component. For example, the following code will change the font weight of the button to semi-bold:

grana-UI is using tailwind-merge to merge the default classes with the classes you provide in the className prop and resolve any possible conflicts.

<Button color="black" size="sm" className="font-semibold">
  Click Me
</Button>

Variants

Trying to avoid to make the user use multiple properties again and again we have created a variant prop. A variant is basically a pre-defined set of properties that can be used to customize a component. For example, the Button component has a success variant that can be used to create a bootstrap-like success button:

<Button variant="success">Click Me</Button>

You can read more about the variants of each component in their corresponding documentation page.

Customization

All grana-UI components are highly customizable. This means that you can easily change the default styles of a component by overriding the corresponding Tailwind CSS classes. You can read more about style customization on the theming page.

Special thanks to the following teams:

• React - For creating React.
• Tailwind Labs - For creating Tailwind CSS.
• Vercel - For creating Next.js and their awesome open source templates.
• Floating-UI - For creating Floating-UI.
• Phosphor - For creating Phosphor icon family.