Trieve Widgets

A reusable React component library for biller management and search, built with TypeScript, Vite, and Material UI.

Features

- SearchBillersWidget: Easily embed a biller/merchant search UI in your React app.
- Theme: Consistent look and feel with a default MUI theme.
- Storybook: Preview and test widgets in isolation.
- TypeScript: Full type safety and type definitions.
- Vite: Fast development and optimized builds.

---

Getting Started

$3

``sh
npm install trieve-widgets


or


yarn add trieve-widgets
`

$3

Import the widget and theme in your React app:

`tsx
import { ThemeProvider } from "@mui/material";
import { theme, SearchBillersWidget } from "trieve-widgets";

function App() {
return (



);
}
`

#### Customization

- onRecordClick: Optional callback when a record is clicked.
- sx: Pass MUI style overrides.

`tsx
onRecordClick={(record) => alert(record.name)}
sx={{ my: 4 }}
/>
`

---

Development

$3

`sh
npm run storybook
`

$3

`sh
npm run build
`

$3

`sh
npm run lint
`

---

Folder Structure

`
widgets/
├── src/
│ ├── components/
│ │ └── SearchBiller/
│ │ ├── SearchBiller.tsx
│ │ └── index.ts
│ ├── theme/
│ │ └── defaultTheme/
│ │ └── defaultTheme.ts
│ ├── index.ts
│ └── stories/
│ └── ...
├── package.json
├── tsconfig.json
├── vite.config.ts
├── tsup.config.ts
└── ...
`

---

Publishing

This package is built with Vite and bundled for npm using vite build and tsup.
Exports are defined in src/index.ts`.

---

License

MIT

---