Aspect Ratio
tailark-base-ui/aspect-ratioFreeComponent
Tailark Base UI Aspect Ratio component
See it running
Open the demo on Tailark Base UI
tailark.com/blocks/aspect-ratioInstall it
npx shadcn@latest add https://tailark.com/r/aspect-ratio.jsonSource
1import { cn } from "@/lib/utils"23function AspectRatio({4 ratio,5 className,6 ...props7}: React.ComponentProps<"div"> & { ratio: number }) {8 return (9 <div10 data-slot="aspect-ratio"11 style={12 {13 "--ratio": ratio,14 } as React.CSSProperties15 }16 className={cn("relative aspect-(--ratio)", className)}17 {...props}18 />19 )20}2122export { AspectRatio }
What it pulls in
npm packages
Other registry items
Files it writes
More from Tailark Base UI
All 468 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | Tailark Base UI | Components | Free | 1 dep | |
| Actionnable Illustrationactionnable | Tailark Base UI | Components | Paid | no deps | |
| Comment Illustrationadd-comment | Tailark Base UI | Components | Paid | no deps | |
| Agent Illustrationagent-feedback | Tailark Base UI | Components | Paid | no deps | |
| Agent Illustrationagent-task-planning | Tailark Base UI | Components | Paid | no deps | |
| Agent Illustrationagent-tasks | Tailark Base UI | Components | Paid | no deps | |
| Agent Illustrationagent-workflow | Tailark Base UI | Components | Paid | no deps | |
| Ai Illustrationai-1 | Tailark Base UI | Components | Paid | no deps |
