React UI framework for business applications

---

---

A complete UI framework that provides a comprehensive suite of tools for building interactive and visually appealing applications. Here's an overview of the key features and components it includes:

1. Common UI Components: These foundational elements are essential for constructing user interfaces. They typically include buttons, links, modals, tooltips, and other basic elements that facilitate user interactions and navigation.

2. Form Inputs: This category encompasses various input elements used to collect data from users. Common form inputs include text fields, checkboxes, radio buttons, select dropdowns, date pickers, and toggles. These components are often designed with built-in validation and styling options to ensure consistency and usability.

3. Data Display Components: Data based components to enable effective data management, visualization, and interaction within applications.

4. Charting Components: These components offer various ways to visualize data, including line charts, bar charts, pie charts, and scatter plots. They are designed to present complex data in a more digestible format, aiding in analysis and decision-making.

5. Styling and Customization: The framework generally includes options for customizing the appearance of components, allowing developers to align the design with their application's branding and user experience requirements. This may include themes, color schemes, and responsive design features.

Overall, this UI framework provides a robust set of components that cater to a wide range of use cases, from basic user interface elements to advanced data visualization tools. It enables developers to build feature-rich and user-friendly applications with a consistent and cohesive design.

Install

# core components
yarn add @react-fabric/core @react-fabric/utilities

# data components
yarn add @react-fabric/data

# form components
yarn add @react-fabric/form

# advanced media viewers
yarn add @react-fabric/media

# comprehensive searchbar for data tools
yarn add @react-fabric/searchbar

# relative date selector with event calendar
yarn add @react-fabric/superdate

# eCharts wrappers
yarn add @react-fabric/chart

# lexical editor
yarn add @react-fabric/lexical

# mdx editor for markdown input
yarn add @react-fabric/mdx

# monaco editor
yarn add @react-fabric/monaco

Setup

Setup postcss for processing TailwindCss

// .postcssrc.js
module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Include TailwindCss and React Fabric styles in main stylesheet

/* main.css */
@import url("tailwindcss");
@import url("@react-fabric/core/css/styles.css");
@import url("@react-fabric/data/css/styles.css");
@import url("@react-fabric/date/css/styles.css");
@import url("@react-fabric/form/css/styles.css");
@import url("@react-fabric/lexical/css/styles.css");
@import url("@react-fabric/mdx/css/styles.css");
@import url("@react-fabric/media/css/styles.css");
@import url("@react-fabric/monaco/css/styles.css");
@import url("@react-fabric/superdate/css/styles.css");

/* helper css with base64 flag images for windows */
@import "@react-fabric/core/css/flags.rect.css";
@import "@react-fabric/core/css/flags.wavy.css";

Include main.css in react root file

// main.tsx
import "./main.css";

import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

createRoot(document.getElementById("root")!).render(<App />);

Development

# build library
yarn dist

# watch changes
yarn watch

# run tests
yarn test

# run storybook
yarn storybook