---
title: "Platform UI component"
description: "@sota/platform/ui は native app 向けの public component library です。Core token、theme、focus behavior、portal、accessibility default を継承します。Core source path や別 copy の Radix/Recharts ではなく…"
url: "https://sotaagents.ai/ja/manual/developer-guide/platform-ui-components"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "ja"
---

# Platform UI component

`@sota/platform/ui` は native app 向けの public component library です。Core token、theme、focus behavior、portal、accessibility default を継承します。Core source path や別 copy の Radix/Recharts ではなく、この entry point から import します。

| Group | Exports |
| --- | --- |
| Action／status | `Button`、`Badge`、`Spinner`、`Skeleton`、`buttonVariants`、`badgeVariants`。 |
| Content／layout | `Card`、`CardHeader`、`CardTitle`、`CardDescription`、`CardContent`、`CardFooter`、`Separator`、`ScrollArea`、`ScrollBar`。 |
| Form | `FormField`、`Label`、`Input`、`Textarea`、`Checkbox`、`Switch`、`Select`、`SelectContent`、`SelectGroup`、`SelectItem`、`SelectLabel`、`SelectSeparator`、`SelectTrigger`、`SelectValue`。 |
| Overlay | `Dialog`、`DialogClose`、`DialogContent`、`DialogDescription`、`DialogFooter`、`DialogHeader`、`DialogTitle`、`DialogTrigger`、`Popover`、`PopoverContent`、`PopoverTrigger`、`Tooltip`、`TooltipContent`、`TooltipProvider`、`TooltipTrigger`。Portal は app surface host 内に留まります。 |
| Navigation | `Tabs`、`TabsList`、`TabsTrigger`、`TabsContent`。 |
| Grounded prose | `CitationText` が `[n]` marker を source pill にします。 |
| Chart | `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 と 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` variant は `default`、`secondary`、`destructive`、`outline`、`link`、`ghost`。Size は `default`、`sm`、`lg`、`icon`、`icon-sm` で、`loading` prop も使えます。

### 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>;
}
```

Preset は `modal`、`editor`、`confirm`、`command`、size は `sm` から `xl` です。`DialogTitle` と `DialogDescription` を必ず置きます。

### Citation と chart

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.',
  }]} />;
}
```

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>;
}
```

Surface が使う primitive だけを import します。Generated declaration が install 済み Core version の exact prop reference です。