Third-party React libraries

Hubleto itself does not use Material UI or any other component library. Its components are written in React with Tailwind CSS. You can still use a library in your own app: your components are normal React components, and the project builds them with webpack.

Install and import

cd /path/to/your/project
npm install @mui/material @emotion/react @emotion/styled

import React from 'react';
import Button from '@mui/material/Button';

export default function CarsToolbar() {
  return <Button variant="contained">Rent a car</Button>;
}

Register the component in Loader.tsx and use it in a view like any other component (see Component).

What the build does

webpack.config.js bundles everything under node_modules/ into the chunk modules.js, and the code of your custom apps into custom-apps.js, with babel-loader for TypeScript and JSX and css-loader for CSS imports.

Cautions

• Size. A library is shipped to every user. Import single components (@mui/material/Button), not the whole package.
• Styles. The library's styles do not follow the Hubleto themes or dark mode. Tailwind CSS and the components of Hubleto look consistent; a library may not.
• One React. Do not install a second copy of react. Use the one of the project.
• Do not ship node_modules. A custom app is delivered as source; the project installs the packages.

When a Hubleto component exists (Table, Form, Modal, the inputs), use it.