🔍⌘K

Start typing to search docs.

UI Library

1.0.0

Design system primitives from @app-factory/ui and usage guidance.

On this page
  1. Cross-platform primitives
  2. Design tokens
  3. Storybook
  4. Guidelines

Cross-platform primitives

@app-factory/ui provides React + React Native compatible components. Each component exposes web + native entry points so generated apps share the same design tokens.

import { Button, Card, InputField } from '@app-factory/ui/web';
  • Button supports primary/secondary/ghost variants with Tailwind-friendly classNames.
  • Card wraps layout primitives with padding + shadow defaults.
  • InputField integrates labels, validation, and helper text.

Design tokens

  • Spacing, colors, and typography live under packages/ui/tokens.ts.
  • Tailwind config consumes tokens for the web; React Native consumes them through StyleSheet factories.

Storybook

View
CLI
pnpm --filter @app-factory/ui storybook:web

Guidelines

Info

Prefer UI primitives over bespoke component styling in generated apps. Shared components ensure white-label apps stay on-brand and accessible.

  • Add new components inside common/ui/src/components and export via index.ts.
  • Update Storybook stories to document props and usage.
  • Run pnpm --filter @app-factory/ui test after changes to keep snapshot tests in sync.