---
title: "Platform UI components"
description: "@sota/platform/ui is the supported component library for native apps. These components inherit Core tokens, theme, focus behavior, portals, and accessibility defaults. Import fr…"
url: "https://sotaagents.ai/manual/developer-guide/platform-ui-components"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "en"
---

# Platform UI components

`@sota/platform/ui` is the supported component library for native apps. These components inherit Core tokens, theme, focus behavior, portals, and accessibility defaults. Import from this entry point instead of Core source paths or a second copy of Radix/Recharts.

| Group | Exports |
| --- | --- |
| Actions and status | `Button`, `Badge`, `Spinner`, `Skeleton`, `buttonVariants`, `badgeVariants`. |
| Content and layout | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`, `Separator`, `ScrollArea`, `ScrollBar`. |
| Forms | `FormField`, `Label`, `Input`, `Textarea`, `Checkbox`, `Switch`, `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectSeparator`, `SelectTrigger`, `SelectValue`. |
| Overlays | `Dialog`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogTitle`, `DialogTrigger`, `Popover`, `PopoverContent`, `PopoverTrigger`, `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipTrigger`. Their portals stay inside the app surface host. |
| Navigation | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. |
| Grounded prose | `CitationText` maps inline `[n]` markers to source pills. |
| Charts | `ChartContainer`, `ChartStyle`, `ChartTooltip`, `ChartTooltipContent`, `ChartLegend`, `ChartLegendContent`, `Area`, `AreaChart`, `Bar`, `BarChart`, `Line`, `LineChart`, `Pie`, `PieChart`, `RadialBar`, `RadialBarChart`, `CartesianGrid`, `XAxis`, `YAxis`, `ChartLabel`, `ChartLabelList`, `Cell`, `Sector`, `ReferenceLine`. |

### Form and card

TSX

```
import { useState } from 'react';
import {
  Button, Card, CardContent, CardFooter, CardHeader, CardTitle,
  FormField, Input, Switch,
} from '@sota/platform/ui';

export function DigestSettings() {
  const [email, setEmail] = useState('');
  const [enabled, setEnabled] = useState(true);
  return (
    <form onSubmit={(event) => event.preventDefault()}><Card variant="flat">
      <CardHeader><CardTitle>Weekly digest</CardTitle></CardHeader>
      <CardContent>
        <FormField id="digest-email" label="Delivery email" required>
          <Input id="digest-email" type="email" value={email}
            onChange={(event) => setEmail(event.target.value)} required />
        </FormField>
        <Switch checked={enabled} onCheckedChange={setEnabled}
          aria-label="Enable weekly digest" />
      </CardContent>
      <CardFooter><Button type="submit" disabled={!email}>Save</Button></CardFooter>
    </Card></form>
  );
}
```

`Button` supports `default`, `secondary`, `destructive`, `outline`, `link`, and `ghost` variants; sizes include `default`, `sm`, `lg`, `icon`, and `icon-sm`. Use `loading` for pending actions. `CardTitle` intentionally defaults to a compact heading.

### Dialog

TSX

```
import {
  Button, Dialog, DialogClose, DialogContent, DialogDescription,
  DialogFooter, DialogHeader, DialogTitle, DialogTrigger,
} from '@sota/platform/ui';

export function DeleteDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild><Button variant="destructive">Delete</Button></DialogTrigger>
      <DialogContent preset="confirm" size="sm">
        <DialogHeader>
          <DialogTitle>Delete report?</DialogTitle>
          <DialogDescription>This action cannot be undone.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
          <Button variant="destructive">Delete</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

Dialog presets are `modal`, `editor`, `confirm`, and `command`; sizes are `sm` through `xl`. Keep a `DialogTitle` and `DialogDescription`. Set `dismissible={false}` only while closing would corrupt an in-flight critical action.

### Citations

TSX

```
import { CitationText } from '@sota/platform/ui';

export function AnswerWithSources() {
  return <CitationText
    text="Revenue grew by 12% [1]."
    citations={[{
      index: 1,
      url: 'https://example.com/q3',
      title: 'Q3 filing',
      snippet: 'Revenue increased twelve percent year over year.',
    }]}
  />;
}
```

### Chart

TSX

```
import {
  Bar, BarChart, CartesianGrid, ChartContainer, ChartTooltip,
  ChartTooltipContent, XAxis, YAxis, type ChartConfig,
} from '@sota/platform/ui';

const chartConfig = {
  credits: { label: 'Credits', color: 'var(--chart-1)' },
} satisfies ChartConfig;
const data = [{ month: 'Jul', credits: 24 }, { month: 'Aug', credits: 31 }];

export function CreditChart() {
  return (
    <ChartContainer config={chartConfig} className="min-h-48 w-full">
      <BarChart data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" /><YAxis />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="credits" fill="var(--color-credits)" />
      </BarChart>
    </ChartContainer>
  );
}
```

Import only the primitives a surface uses. The generated declarations are the exact prop reference for the installed Core version.