Tot-Loft-component-library

tot-loft-component-library is a versatile frontend library that offers a collection of reusable and customizable UI components designed to streamline your web development process. Whether you're building a small project or a large-scale application, this library provides the essential components to help you get started quickly.

Table of Contents

• Installation
• Usage
• Components
• Customization

Installation

You can install the tot-loft-component-library via npm or yarn:

npm

npm install tot-loft-component-library

yarn

yarn add tot-loft-component-library

Usage

To use any component from the tot-loft-component-library, simply import the desired component and include it in your JSX:

import React from 'react';
import { Button } from 'tot-loft-component-library';

const App = () => {
  return (
    <div>
      <Button variant="primary">Click Me</Button>
    </div>
  );
};

export default App;

Applying Themes

The library allows you to easily apply custom themes using the AIMEContextProvider. This helps in consistent styling across your application:

import React from 'react';
import { AIMEContextProvider, Button } from 'tot-loft-component-library';
import customTheme from './path-to-your-custom-theme';

const App = () => {
  return (
    <AIMEContextProvider theme={customTheme}>
      <Button variant="primary">Click Me</Button>
    </AIMEContextProvider>
  );
};

export default App;

Components

tot-loft-component-library includes a wide range of components, such as:

• Button: A versatile button component with multiple variants.
• Avatar: A customizable avatar component for displaying user images or initials.
• Modal: A fully accessible modal component for dialog boxes.
• Input: A set of input components for forms, including text inputs, checkboxes, and radio buttons.
• Card: A flexible card component for displaying content in a contained layout.

For a complete list of components and their usage, please refer to the documentation.

Customization

tot-loft-component-library is designed with customization in mind. You can override the default theme or provide custom styles to any component:

import { Button } from 'tot-loft-component-library';

const CustomButton = () => (
  <Button
    style={{
      backgroundColor: '#FF5733',
      color: '#fff',
    }}
  >
    Custom Button
  </Button>
);