@fogito/core-ui

Modern, reusable React component library for the Fogito platform — the successor to the legacy fogito-core-ui.

Stack: React 19 · TypeScript (strict) · Tailwind CSS v4 · Radix UI · CVA · TanStack Query (peer)

Ships compiled ESM + type declarations in dist/ — no build step required in the consuming app.

Install

npm install @fogito/core-ui

Peer dependencies: react >= 18, react-dom >= 18, @tanstack/react-query >= 5.

Setup

1. Import the base styles

// main.tsx
import "@fogito/core-ui/styles.css";

2. Generate the component classes

If your app uses Tailwind CSS v4 (recommended), let Tailwind scan the library source in your main CSS file:

@import "tailwindcss";
@source "../node_modules/@fogito/core-ui/src";

If your app does not use Tailwind, import the pre-built stylesheet instead:

import "@fogito/core-ui/prebuilt.css";

3. Wrap your app

import { AppProvider } from "@fogito/core-ui";

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

Usage

import { Button, Modal, Select, Avatar, useToast } from "@fogito/core-ui";

function Example() {
  const { toast } = useToast();
  return <Button onClick={() => toast.success("Saved")}>Save</Button>;
}

What's inside

| Area | Exports | |---|---| | Components | Button, Input, Select, MultiSelect, Modal, Table, DataTable, Tabs, Dropdown, Tooltip, Avatar, Badge, Alert, Calendar, DatePicker, TimePicker, Pagination, Sidebar, Skeleton, Spinner, Toaster, PickMap, PieChart, Progress, VerificationCodeInput and more | | Hooks | useDebouncedValue, useModal, useCookie, useDimensions, useTimer | | API | createApiClient — typed, envelope-aware fetch client | | Auth | createAuth — session + permission hooks (useSession, usePermission) | | i18n | createI18n — translation provider + useTranslation | | Utils | cn, formatting and URL helpers, icon set |

Development

npm install
npm run typecheck   # tsc --noEmit
npm run build       # compiles to dist/ (runs automatically on publish)

Adding a component: create src/components/<name>/<Name>.tsx + index.ts, re-export it from src/index.ts.

Publishing

npm version patch   # or minor / major
npm publish         # 2FA-protected; prepare script builds dist/ automatically

License

MIT © Fogito