@bandf/framework-ui

@bandf/framework-ui is the React component layer for BandF apps. It ships raw JSX primitives, BandF-specific components, and the cn() class helper for Parcel to compile inside each app.

Contents

• Use components
• Configure aliases and Tailwind
• Theming
• Package boundaries
• Related links

Use components

Generated React apps use per-component imports:

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export function ProfileCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Profile</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Save</Button>
      </CardContent>
    </Card>
  );
}

The root barrel is also available:

import { Button, Card, cn } from "@bandf/framework-ui";

Most primitives follow shadcn conventions: named exports, Radix behavior where appropriate, class-variance-authority variants, Tailwind classes, refs, and a caller-provided className.

Configure aliases and Tailwind

The React templates include the required aliases in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/components/ui/*": [
        "../../node_modules/@bandf/framework-ui/components/ui/*"
      ],
      "@/lib/utils": ["../../node_modules/@bandf/framework-ui/lib/utils"]
    }
  }
}

Tailwind must scan package JSX as well as app JSX:

export default {
  content: [
    "./views/**/*.{js,jsx}",
    "../../node_modules/@bandf/framework-ui/**/*.{js,jsx}",
  ],
};

The package deliberately ships source JSX. Parcel performs the application build, which keeps one transformation pipeline and lets Tailwind discover the exact classes used by imported components.

Theming

Components consume semantic CSS variables such as --background, --foreground, --primary, --card, and --border through Tailwind mappings. Generated apps define those variables as space-separated HSL channels:

:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --primary: 221 83% 53%;
}

Store channels only, not a complete hsl(...) value, hex color, or named color; the Tailwind theme wraps each token with hsl(var(--token)). Keep a corresponding .dark value in sync when the app supports dark mode.

Package boundaries

React 19 and React DOM 19 are peer dependencies supplied by the app. Component dependencies are package dependencies and require no app-level wiring beyond the template's aliases, Tailwind scan path, and theme.

The root barrel intentionally omits modules whose exports collide:

• components/ui/bf-floating-panel.jsx re-exports common form and header names;
• components/ui/sonner.jsx and components/ui/toaster.jsx both export Toaster.

Import those modules through their explicit subpaths. All package files are available below the wildcard export.

Related links

• Framework overview
• BandF UI component reference
• React basic template
• React and API template