Components
- AccordionDone
- AlertDone
- Alert DialogDone
- Aspect RatioNo Change
- AvatarDone
- BadgeDone
- BreadcrumbDone
- ButtonDone
- Button GroupDone
- CalendarNo Change
- CardDone
- CarouselDone
- ChartNo Change
- CheckboxDone
- CollapsibleNo Change
- ComboboxDone
- CommandDone
- Context MenuDone
- Data TableDone
- Date PickerDone
- DialogDone
- DrawerDone
- Dropdown MenuDone
- EmptyNo Change
- FieldNo Change
- React Hook FormNo Change
- Hover CardDone
- InputDone
- Input GroupDone
- Input OTPDone
- ItemDone
- KbdDone
- LabelDone
- MenubarDone
- Navigation MenuDone
- PaginationDone
- PopoverDone
- ProgressDone
- Radio GroupDone
- ResizableNo Change
- Scroll AreaNo Change
- SelectDone
- SeparatorDone
- SheetDone
- SidebarNo Change
- SkeletonDone
- SliderDone
- SonnerDone
- SpinnerDone
- SwitchDone
- TableNo Change
- TabsDone
- TextareaDone
- ToastDone
- ToggleDone
- Toggle GroupDone
- TooltipDone
- TypographyDone
Aspect Ratio
Wrapper component that maintains a fixed ratio while letting the child fill the available slot. The Omni version applies the frosted panel and mono labelling used throughout the console.
Examples
Media Preview
Lock telemetry tiles or video stills to consistent dimensions without manual spacing.
Throughput
42.8k msg/s
Workspace
Installation
pnpm dlx shadcn@latest add @omni/aspect-ratio
Usage
import { AspectRatio } from "@/components/ui/aspect-ratio"<AspectRatio ratio={16 / 9}>
<div className="absolute inset-0 bg-gradient-to-br from-slate-800 via-transparent to-slate-900" />
<div className="absolute inset-0 flex items-end justify-between p-4">
<span className="font-mono text-[10px] uppercase tracking-[0.32em]">Region</span>
<span className="text-sm">Tokyo</span>
</div>
</AspectRatio>