@gravitguru/forest-ui NPM

Logo

Forest UI - Description

Forest UI component library provides a collection of reusable UI components built with Tailwind CSS and Vite React. It includes components like buttons, layout, theme mode, table, form, input, pagination, etc.

Installation

You can install the component library using npm:

npm install @gravitguru/forestUI

Or using yarn:

yarn add @gravitguru/forestUI

Or using yarn:

import '@gravitguru/forestUI'; // import after run the server

Usage

To use components from your library, import them into your React components:

import { Button, Table, Form } from '@gravitguru/forestUI';

Edit the components in src/components.

Start the development server:

npm run dev

Visit http://localhost:8000 in your browser to preview your changes.

Then, you can use these components in your JSX:

<Button variant="primary">Click me</Button>
<Table data={tableData} columns={tableColumns} />
<Form onSubmit={handleSubmit}>
  <Input name="username" type="text" />
  <Button type="submit">Submit</Button>
</Form>

Available Components

Button: A customizable button component. Layout: Pre-defined layout components for easier page structuring. ThemeMode: Allows toggling between light and dark themes. Table: A table component for displaying tabular data. Form: Form components for building forms easily. Input: An input component for text input. 100+ Components: A wide variety of components for different UI needs. Full-Page Components: Ready-to-use components for entire page layouts. Assets: Includes assets such as images, fonts, and more. Icons: A collection of icons for use in your interfaces. Animations: Provides animation utilities for enhancing user experience.

Theming

Your component library supports theming using Tailwind CSS. You can customize the colors, typography, spacing, and more by editing the tailwind.config.js file in your project.