TrueFoundry Web Components

Structure/Elements

• ⚛️ React 18
• 📚 Storybook 8 - Components preview
• 🖌️ Tailwind CSS 3
• ⏩ Vite - Run and build the project blazingly fast!
• ⚡ Vitest - Components Unit Testing
• 📐 ESLint & Prettier - Formatting and Linting
• 🌟 Typescript
• 🐶 Husky & Lint Staged - Pre-commit Hooks

Usage

1. Install the package:

yarn add tfy-web-components

Design-system runtimes (MUI, Emotion, Font Awesome, OpenUI, Monaco) ship as dependencies of tfy-web-components — you do not need to install them separately. If your app already depends on MUI and needs a single shared instance/theme, use your package manager’s resolutions / overrides.

2. Wire up theming, matching your consumer app's Tailwind version:

Tailwind v3

Use the exported preset — it configures the color palette, bg-light-*/ text-light-* utilities, and the scrollbar plugin in one line, and re-exports tailwindContentPaths so Tailwind can detect the classes this package's compiled components use:

// tailwind.config.js
import tfyPreset, { tailwindContentPaths } from 'tfy-web-components/tailwind-preset'

export default {
  presets: [tfyPreset],
  content: ['./src/**/*.{js,ts,jsx,tsx}', ...tailwindContentPaths],
}

Then wrap your app in the theme provider (owns the .dark class, persists the user's preference, and injects the --color-* CSS variables at runtime):

import { ThemeProvider } from 'tfy-web-components/components/theme/useTheme'

;<ThemeProvider>
  <App />
</ThemeProvider>

Tailwind v4

Import the generated theme stylesheet once in your Tailwind entry CSS — it declares the palette's @theme inline registrations plus an @source directive, so no content-path configuration is needed:

@import 'tailwindcss';
@import 'tfy-web-components/theme.css';

If a host app/SDK already owns its theme state, pass the resolved theme to ThemeProvider. It will apply the same value to its context and the document without persisting a separate preference or listening to system-theme changes:

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

Omit theme when tfy-web-components should own the preference through localStorage and the system preference.

Markdown styles

GitHub Markdown base styles plus .markdown-body / .markdown-table overrides ship in markdown.css. Tailwind v4 apps already get them via theme.css (no extra import). Tailwind v3 apps (or anyone not using theme.css) should import markdown.css directly:

/* Tailwind v4 — already included when you import theme.css */
@import 'tfy-web-components/theme.css';

/* Tailwind v3 / à-la-carte */
@import 'tfy-web-components/markdown.css';

KaTeX styles are pulled in by the Markdown component JS import (katex/dist/katex.min.css); ensure your bundler preserves CSS side effects from that dependency.

import Markdown from 'tfy-web-components/components/molecules/Markdown'

The default wrapper class is markdown-body (overridable via bodyClass).

Agent chat components

Import agent-chat UI from the barrel or the explicit deep entries only:

import { ToolCallCard, SubAgentCard } from 'tfy-web-components/components/molecules/agent-chat'
import UserMessage from 'tfy-web-components/components/molecules/agent-chat/UserMessage'

Per-file agent-chat/* wildcards are not published; use the barrel unless you need UserMessage or UserMessageEdit as standalone entries.

Package Configuration

See PACKAGE_CHANGES.md for details on:

• Why sideEffects: ["**/*.css"] is critical for proper tree-shaking
• Why the exports field has no "require" entry

Main Scripts

Always prepending yarn:

• dev: Bootstrap the Storybook preview with Hot Reload.
• build: Builds the static storybook project.
• build:lib: Builds the component library into the dist folder.
• lint:fix: Applies linting based on the rules defined in .eslintrc.js.
• format:prettier: Formats files using the prettier rules defined in .prettierrc.
• test: Runs testing using watch mode.
• test:cov: Runs testing displaying a coverage report.

License

MIT