Performance-focused, security-hardened, finance-oriented React component library. Zero runtime dependencies. WCAG 2.2 AA. RTL + locale-aware.
Live Storybook: https://fehmicitiloglu.github.io/firik
Firik (FIN-RIK) is a wide-scope UI toolkit designed primarily for trading, banking, brokerage, and treasury applications — domains where precision, auditability, and accessibility are not optional.
Most general-purpose React libraries make one or more of these tradeoffs that are unacceptable in finance:
| Concern | Common libraries | Firik |
|---|---|---|
| Money math | Float (number) |
BigInt-backed Decimal |
| URL/HTML injection | Trust caller | safeUrl / safeHttpUrl + no-dangerous-html lint |
| CSV export | Naive join | Formula-injection guarded (=+-@<TAB> prefixed ') |
| Sensitive data | Up to consumer | First-class sensitive flag + redact() |
| Runtime CSS-in-JS | Required | None — CSS Modules + tokens (CSP-safe) |
| Supply chain | Hundreds of transitive deps | Zero runtime deps (only React peer) |
| RTL | Bolt-on | Logical CSS properties throughout |
| Accessibility | Roles only | WAI-ARIA APG patterns + tested keyboard |
This is an npm workspaces monorepo:
| Package | Purpose |
|---|---|
@firik-ui/core |
Headless logic — hooks, primitives, utilities (Decimal, safeUrl). |
@firik-ui/ui |
Styled components built on top of @firik-ui/core. |
@firik-ui/eslint-plugin |
Lint rules: no-float-money, no-unsafe-url-prop, no-dangerous-html. |
npm install @firik-ui/ui @firik-ui/coreimport "@firik-ui/ui/dist/tokens.css"; // design tokens + theme variables
import { ThemeProvider, DataGrid, MoneyInput } from "@firik-ui/ui";
export function App() {
return (
<ThemeProvider theme="light" dir="ltr" locale="en-US">
{/* your app */}
</ThemeProvider>
);
}See docs/architecture.md for the full design.
| Topic | File |
|---|---|
| Architecture & monorepo layout | architecture.md |
| Security model (XSS, CSP, supply chain) | security.md |
| Finance primitives (Decimal, money inputs) | finance.md |
| Accessibility (WCAG 2.2 AA, RTL, keyboard) | a11y.md |
| Theming (tokens, dark/HC/CB palettes) | theming.md |
| Figma integration (Tokens Studio kit) | figma.md |
| ESLint plugin | eslint.md |
| Component reference | components/ |
- Tests: 57 passing (vitest + jsdom).
- Type-checks: strict,
noUncheckedIndexedAccess,exactOptionalPropertyTypes. - Audit:
npm audit --audit-level=high→ 0 findings.
npm run typecheck # tsc --noEmit, all packages
npm test # vitest run
npm run audit # npm audit --audit-level=high
npm run build # tsc per package