Components

The SDK re-exports a curated set of shadcn/ui components that are already themed to match the Stratos shell. Use these instead of installing your own UI library to stay visually consistent across plugins.

Import

All components are available from a single import:

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  Badge,
  Input,
  Label,
  // ... etc
} from "@skyvexsoftware/stratos-sdk";

Component Reference

Dialogs

AlertDialog

Accessible alert dialog for confirmations and destructive actions.

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
} from "@skyvexsoftware/stratos-sdk";

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Sub-components: AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel

Dialog

General-purpose modal dialog.

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "@skyvexsoftware/stratos-sdk";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit Fleet Entry</DialogTitle>
      <DialogDescription>
        Make changes to the aircraft record.
      </DialogDescription>
    </DialogHeader>
    {/* form content */}
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Sub-components: Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger

Forms

Input

Single-line text input.

import { Input, Label } from "@skyvexsoftware/stratos-sdk";

<div className="flex flex-col gap-1.5">
  <Label htmlFor="callsign">Callsign</Label>
  <Input id="callsign" placeholder="BAW123" />
</div>

Textarea

Multi-line text input.

import { Textarea, Label } from "@skyvexsoftware/stratos-sdk";

<div className="flex flex-col gap-1.5">
  <Label htmlFor="remarks">Remarks</Label>
  <Textarea id="remarks" placeholder="Enter flight remarks..." rows={4} />
</div>

Select

Dropdown select menu.

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
} from "@skyvexsoftware/stratos-sdk";

<Select onValueChange={(value) => setUnit(value)}>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select units" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Unit System</SelectLabel>
      <SelectItem value="imperial">Imperial</SelectItem>
      <SelectItem value="metric">Metric</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Sub-components: Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue

Combobox

Searchable single-select. Prefer this over Select when there are many options — the list filters as you type and scrolls natively.

import { Combobox } from "@skyvexsoftware/stratos-sdk";

<Combobox
  value={aircraftId}
  onValueChange={setAircraftId}
  options={[
    { value: "1", label: "VH-VXA · 737-800", group: "Boeing 737-800" },
    { value: "2", label: "VH-XYZ · A320", group: "Airbus A320" },
  ]}
  placeholder="Select aircraft"
  searchPlaceholder="Search aircraft…"
  emptyText="No aircraft found"
/>

Props: options ({ value, label, group? }[]; options sharing a group render under that heading, in first-seen order, and options without one stay flat at the top), value, onValueChange, placeholder, searchPlaceholder, emptyText, loading, loadingText, disabled, triggerClassName, contentClassName, align, onOpenChange, id, aria-label, aria-labelledby. Pass loading while options are being fetched to avoid a flickering empty state. Pass aria-label or aria-labelledby to give the trigger an accessible name; the search field inside the popover inherits aria-label automatically.

RadioGroup

Radio button group for mutually exclusive choices.

import { RadioGroup, RadioGroupItem, Label } from "@skyvexsoftware/stratos-sdk";

<RadioGroup defaultValue="imperial" onValueChange={setUnit}>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="imperial" id="imperial" />
    <Label htmlFor="imperial">Imperial</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="metric" id="metric" />
    <Label htmlFor="metric">Metric</Label>
  </div>
</RadioGroup>

Slider

Range slider for numeric values.

import { Slider, Label } from "@skyvexsoftware/stratos-sdk";

<div className="flex flex-col gap-2">
  <Label>Refresh interval: {interval}s</Label>
  <Slider
    min={5}
    max={120}
    step={5}
    value={[interval]}
    onValueChange={([v]) => setInterval(v)}
  />
</div>

Switch

Toggle switch for boolean settings.

import { Switch, Label } from "@skyvexsoftware/stratos-sdk";

<div className="flex items-center gap-2">
  <Switch
    id="show-map"
    checked={showMap}
    onCheckedChange={setShowMap}
  />
  <Label htmlFor="show-map">Show map</Label>
</div>

Layout

Card

Elevated container for grouping related content.

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  CardAction,
} from "@skyvexsoftware/stratos-sdk";

<Card>
  <CardHeader>
    <CardTitle>Fleet Status</CardTitle>
    <CardDescription>Aircraft currently available</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-2xl font-bold">24</p>
  </CardContent>
  <CardFooter className="text-muted-foreground text-sm">
    Last updated 2 minutes ago
  </CardFooter>
</Card>

Separator

Horizontal or vertical visual divider.

import { Separator } from "@skyvexsoftware/stratos-sdk";

<div>
  <p>Section one</p>
  <Separator className="my-4" />
  <p>Section two</p>
</div>

Tabs

Tabbed content panels.

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@skyvexsoftware/stratos-sdk";

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="roster">Roster</TabsTrigger>
    <TabsTrigger value="flights">Flights</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">
    <OverviewPanel />
  </TabsContent>
  <TabsContent value="roster">
    <RosterPanel />
  </TabsContent>
  <TabsContent value="flights">
    <FlightsPanel />
  </TabsContent>
</Tabs>

Floating panel anchored to a trigger. Use it for lightweight overlays (filters, pickers, info panels); for modal flows use Dialog. It’s the primitive behind Combobox.

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  Button,
} from "@skyvexsoftware/stratos-sdk";

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Filters</Button>
  </PopoverTrigger>
  <PopoverContent align="start">
    <p className="text-sm">Panel content</p>
  </PopoverContent>
</Popover>

Sub-components: Popover, PopoverTrigger, PopoverAnchor, PopoverContent

Feedback

Badge

Inline status label or tag.

import { Badge, badgeVariants } from "@skyvexsoftware/stratos-sdk";

<Badge>Active</Badge>
<Badge variant="outline">Pending</Badge>
<Badge variant="destructive">Error</Badge>

// Use the variant helper for non-Badge elements
<span className={badgeVariants({ variant: "secondary" })}>Tag</span>

Button

Primary interactive element.

import { Button, buttonVariants } from "@skyvexsoftware/stratos-sdk";

<Button>Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete</Button>
<Button size="sm">Small</Button>
<Button disabled>Disabled</Button>

// Use the variant helper for link elements
<a href="/page" className={buttonVariants({ variant: "outline" })}>
  Go to page
</a>

Non-interactive contextual hint. The content renders in a portal on document.body, so it isn’t clipped by a dialog or an overflow-hidden parent. Stratos already wraps plugin UI in a TooltipProvider with no open delay, so a plugin only needs its own provider to change that timing.

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from "@skyvexsoftware/stratos-sdk";

// Wrap your root (or the relevant section) in TooltipProvider
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button size="icon" variant="ghost">
        <InfoIcon size={16} />
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>This value updates every 30 seconds</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Maps

StratosMap

A react-map-gl Map in the Stratos map style, light or dark to match the theme, switching as soon as the theme changes. Every other prop (your onLoad included), the ref and the children (Source, Layer, Marker and the rest) work as they do on Map; there’s no mapStyle to set.

import { StratosMap } from "@skyvexsoftware/stratos-sdk";
import { Source, Layer } from "react-map-gl/maplibre";

<StratosMap
  initialViewState={{ longitude: 151.2, latitude: -33.9, zoom: 5 }}
  style={{ width: "100%", height: "100%" }}
>
  <Source id="route" type="geojson" data={route}>
    <Layer id="route-line" type="line" paint={{ "line-color": "#4b7bf5" }} />
  </Source>
</StratosMap>

The attribution is always the compact one, tucked behind its info button until it’s opened, so attributionControl isn’t a prop.
Want your own look? Pass lightStyle and darkStyle (a style URL or a style object, like mapStyle). Either one you leave out stays the Stratos style.
It tells Stratos when it has finished drawing the theme showing, so the debug footer’s Screenshot waits for it and both shots show the right map.
It needs SDK 0.23.0 and Stratos core 2.52.0 or later, so set min_core_version to at least 2.52.0.
If the graphics driver can’t draw the map (often just after the PC wakes from sleep), only the map is replaced, by a “Map unavailable” panel with a Try again button; the rest of your page keeps working.
The Stratos style shows English place names (or the local name where there’s no English one) and leaves out village, hamlet, highway shield and minor road labels. Your own lightStyle and darkStyle are used as they are.

Icons

Import icons directly from lucide-react — they’re tree-shaken, so only the icons you use land in your bundle:

import { Plane, Map, Settings, History } from "lucide-react";

The shell provides a single React instance to all plugins via the SDK’s Vite shim, so lucide-react’s own React imports resolve to the same instance — no two-React crashes, no bundle duplication.

DynamicIcon

For an icon picked by name at runtime (say, from an airline setting), use DynamicIcon. Stratos ships every Lucide icon as its own small chunk and loads one only when it’s shown, so your plugin carries none of the icon set:

import { DynamicIcon } from "@skyvexsoftware/stratos-sdk/icons";

<DynamicIcon name="plane" size={16} />
<DynamicIcon name={setting.icon} size={18} aria-hidden="true" />

name is a Lucide name (book-open; BookOpen works too). Other props (size, className, strokeWidth, …) go to the icon.
Until the icon has loaded it renders an empty box the same size, so nothing shifts. An unknown name shows a small generic icon, or your fallback component.
Import it from the /icons subpath (SDK 0.21.0+): that part is bundled into your plugin, so it works on any Stratos. It needs Stratos core 2.49.0 or later to load icons; on an older core it shows the generic icon.
Icons you know at build time are still best imported by name from lucide-react, which is bundled and tree-shaken.

Styling Notes

All components use the shell’s Tailwind theme tokens automatically. Dark mode is handled for you — use semantic class names like bg-card, text-muted-foreground, and border rather than hardcoded colours:

<div className="bg-card rounded-lg border p-6">
  <h2 className="text-lg font-semibold">My Section</h2>
  <p className="text-muted-foreground mt-2 text-sm">Description</p>
</div>

Key theme tokens:

Class	Usage
`bg-card`	Card and panel backgrounds
`bg-muted`	Subtle secondary backgrounds
`text-muted-foreground`	Secondary and supporting text
`border`	Standard borders
`bg-primary` / `text-primary`	Accent colour (configured per-airline)

Get Started

Developer centre

Plugin Basics

UI Module

Background Module

Deploy

Type Reference

Import

Component Reference

Dialogs

AlertDialog

Dialog

Forms

Input

Textarea

Select

Combobox

RadioGroup

Slider

Switch

Layout

Card

Separator

Tabs

Popover

Feedback

Badge

Button

Tooltip

Maps

StratosMap

Icons

DynamicIcon

Styling Notes

​Import

​Component Reference

​Dialogs

​AlertDialog

​Dialog

​Forms

​Input

​Textarea

​Select

​Combobox

​RadioGroup

​Slider

​Switch

​Layout

​Card

​Separator

​Tabs

​Popover

​Feedback

​Badge

​Button

​Tooltip

​Maps

​StratosMap

​Icons

​DynamicIcon

​Styling Notes

Import

Component Reference

Dialogs

AlertDialog

Dialog

Forms

Input

Textarea

Select

Combobox

RadioGroup

Slider

Switch

Layout

Card

Separator

Tabs

Popover

Feedback

Badge

Button

Tooltip

Maps

StratosMap

Icons

DynamicIcon

Styling Notes