Finance Front

React component package for financial applications. Editable, customizable, and ready to use in any React project.

Installation

npm install finance-front

Component Import

import {
  Chatbot,
  ChatInput,
  ChatMessage,
  BotTyping,
  Header,
  Home,
} from "finance-front";

Basic Usage

import { Chatbot } from "finance-front";

function App() {
  return <Chatbot />;
}

Customization

All components accept props for customization:

• className: Add custom classes.
• style: Style via CSS object.
• Component-specific props (see examples below).

Customization Example

<ChatInput
  placeholder="Digite sua mensagem..."
  className="meu-input"
  style={{ border: "1px solid #00f" }}
/>

Styles

You can import the package's SCSS/CSS styles or override them with your own. Prefer importing the compiled CSS from the package so consumers don't need to compile the library's SCSS:

Recommended (works with this package):

// in your app entry (e.g. src/main.jsx)
import "finance-front-aifinance-app/style.css";

Or you can import the dist CSS explicitly:

import "finance-front-aifinance-app/dist/style.css";

Notes:

• The package exposes style in package.json and provides dist/style.css in the published bundle.
• If your bundler doesn't process CSS from node_modules, copy dist/style.css into your app's assets and include it with a <link> tag.

If you need to override styles, import your custom stylesheet after the package stylesheet so your selectors take precedence.

Build and Distribution

To build the library locally:

BUILD_LIB=true npm run build

The generated files will be in dist/.

Licença

MIT