TrueFoundry Web Components

Structure/Elements

• ⚛️ React 19
• 📚 Storybook 10 - Components preview
• 🖌️ Tailwind CSS 4
• 🧩 shadcn/ui - Base primitives (Base UI + CVA)
• ⏩ 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

Font Awesome, OpenUI, Monaco, and Base UI ship as dependencies of tfy-web-components — you do not need to install them separately. Icons are Font Awesome and custom SVGs through IconProvider.

2. Wire up theming (Tailwind v4):

Import the generated theme stylesheet once in your Tailwind entry CSS — it declares Figma-synced shadcn tokens, dark variant, fonts, and animations:

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

Then wrap your app in the theme provider (owns the .dark class and persists the user's preference):

import { ThemeProvider } from 'tfy-web-components/components/theme/useTheme'
;<ThemeProvider>
  <App />
</ThemeProvider>

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.

Components

Existing deep imports are unchanged. See DESIGN_SYSTEM.md.

import Button from 'tfy-web-components/components/atoms/Button'

Design tokens

Figma Variables → design-tokens/figma-variables.json → yarn tokens:build → src/components/theme/tokens.css

tokens.css is generated (imported via theme.css). To change a colour, type scale, spacing, or radius: update Figma → export JSON (see design-tokens/README.md) → run yarn tokens:build → commit JSON and tokens.css.

For a full changelog of the design-system base PR and how to extend it with new components, see DESIGN_SYSTEM.md.

Markdown styles

GitHub Markdown base styles plus .markdown-body / .markdown-table overrides ship in markdown.css and are included via theme.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'

Agent chat components

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

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: Applies linting based on the rules defined in eslint.config.js.
• format:check: Checks formatting against .prettierrc without writing files.
• prettier: Formats files using the prettier rules defined in .prettierrc.
• typecheck: Typechecks the project with tsc --noEmit.
• test: Runs Vitest in watch mode.
• test:run: Runs the test suite once.
• test:cov: Runs the suite once and writes a coverage report to coverage/.
• check: Runs lint, format, typecheck, and test:run.

Pull requests and pushes to main run lint, format, typecheck, test (test:cov), and build (build:lib) as separate GitHub checks. The test check uploads the src coverage report as an artifact. Set lines, functions, branches, and statements in vite.config.js when that report should gate the check.

License

MIT