@multiplatform.one/components

Cross-platform catalog UI for multiplatform.one — surfaces, feedback, navigation, media, and layout components built on Tamagui, themed through the knobs system.

Install

pnpm add @multiplatform.one/components

Requires react (and react-native / react-dom for the target platform) as peers.

What it owns

• Surfaces — Card, CardHeader, CardFooter, Panel, DialogContent, PopoverContent, SheetFrame (knob-aware, shadowing the raw Tamagui primitives)
• Feedback — Alert, Toast / useToast, Skeleton, ProgressSteps, DotIndicator
• Navigation & disclosure — Tabs, Accordion, DropdownMenu, Pagination, SkipLink
• Display — Avatar, Badge, Chip, Quote, Tooltip, Carousel, Video, Image, code blocks, icons, layouts, ErrorBoundary
• Charts — BarChart, LineChart, AreaChart, PieChart, Sparkline: one universal codebase (headless d3 math + SVG) on web, iOS, and Android; series colors come from the canonical useChartPalette() in @multiplatform.one/theme, explicit data colors pass through untouched. react-native-svg is an optional peer, needed only on native
• A full re-export of tamagui (YStack, XStack, Text, …), so this package is the only UI import apps and features need

What it must not do

• No Frappe or API assumptions — data-aware wrappers live in @multiplatform.one/frappe-ui
• No form fields — fields, Form, and input parts live in @multiplatform.one/forms
• No data tables — DataTable lives in @multiplatform.one/table

Per house rules, apps and features import this package instead of raw tamagui.

Usage

import { Avatar, Card, CardHeader, Chip, Text, YStack } from "@multiplatform.one/components";

export function UserCard() {
  return (
    <Card>
      <CardHeader>
        <Avatar name="Ada Lovelace" src="https://example.com/ada.png" />
      </CardHeader>
      <YStack>
        <Text>Ada Lovelace</Text>
        <Chip>Admin</Chip>
      </YStack>
    </Card>
  );
}

Styling

Components resolve structural styling (radius, spacing, elevation, typography) through the knobs system in @multiplatform.one/theme — wrap screens in a <Preset> and flip knobs instead of hardcoding style props. See agent-os/standards/frontend/knobs-system.md in the multiplatform.one repo.

License

Apache-2.0