Overview:

Hixme-ui is a React component library designed to support the Hixme ecosystem, offering a range of pre-built components that can be easily integrated into projects. With Hixme-ui, developers can enhance their user interfaces by leveraging ready-to-use components built with React, Styled Components, and Jest. This library aims to simplify the development process and provide consistent design patterns for users.

Features:

• Animate: Smooth and customizable animation effects for elements on the webpage.
• App Layout: A layout component that provides a consistent structure for web application pages.
• Benefit Price: A component for displaying pricing information related to benefits.
• BulletList: A component for displaying information in a bullet-list format.
• Button: Various button styles and sizes to suit different needs.
• Card Drawer: A card component that slides out to reveal additional content.
• Card: A customizable card component for displaying information or data.
• Checkbox: A component for checkboxes with customizable styles.
• Close Button: A small button for closing or dismissing elements.
• Container: A container component that wraps other components and provides a spacing system.
• Content Container: A container component for holding content with customizable styles.
• Currency: A component for formatting currency values.
• Dates: A utility component for handling date formatting and display.
• Email: A component for inputting email addresses with validation.
• Form Components: A collection of form-related components for input fields, checkboxes, radio buttons, and more.
• Form Group: A component for grouping related form elements.
• Icon: A library of icons that can be easily integrated into projects.
• InputLabel: A component for displaying labels for form elements.
• Modal: A reusable dialog component for displaying content in a modal window.
• Percentage: A component for displaying percentages with custom formatting.
• Phone: A component for inputting phone numbers with validation.
• Placeholder: A component for generating placeholder text or images.
• Price: A component for displaying prices or amounts with custom formatting.
• Print: A utility component for printing content.
• Radio Button: A component for radio buttons with customizable styles.
• Select: A customizable dropdown select component.
• Separator: A simple horizontal line component for visually separating content.
• Sidebar: A side navigation panel component for organizing content or menus.
• Social Security: A component for inputting social security numbers with validation.
• Step: A component for creating step-by-step progress indicators.
• Table: A flexible and customizable table component for displaying tabular data.
• Tabs: A component for creating tabbed interfaces.
• Text: A component for displaying styled text.
• Title: A component for displaying titles or headings with customizable styles.
• Toggle: A switch-like component for toggling between states.
• Upload Box: A component for uploading files.

Installation:

To start using Hixme-ui in your project, follow the steps below:

1. Install the theme and required components by running the following command:

npm install hixme-ui

2. Import the theme provider and the necessary components into your project:

import { ThemeProvider } from 'styled-components';
import { Button, Card, Checkbox } from 'hixme-ui';

3. Wrap your application with the theme provider component to enable the HUI components to access the theme:

const App = () => (
  <ThemeProvider theme={theme}>
    {/* Your application components */}
  </ThemeProvider>
);

4. Start using the HUI components in your application, for example:

const MyComponent = () => (
  <div>
    <Button primary>Click me!</Button>
    <Card>
      <Checkbox label="Check me" />
    </Card>
  </div>
);

Summary:

Hixme-ui is a React component library that offers a comprehensive set of components designed to enhance user interfaces. It simplifies the development process by providing ready-to-use components that can be easily integrated into projects. With Hixme-ui, developers can quickly create interactive and visually appealing web applications while maintaining a consistent design pattern. By leveraging technologies such as React, Styled Components, and Jest, Hixme-ui ensures high-quality and performant components for building modern web applications.