Platform UI components

On this page

Form and card
Dialog
Citations
Chart

@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.