Aspect Ratio

rivelle/aspect-ratio

FreeComponent

A server-independent primitive for predictable media proportions.

Live preview

live · rendered by the registry

Rendered by rivelle on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://rivelle.dev/r/aspect-ratio.json

Source

registry/nova/ui/aspect-ratio.tsxrivelle.dev/r/aspect-ratio.json

1"use client"
2 
3import * as React from "react"
4import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
5 
6function AspectRatio(props: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
7  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
8}
9 
10export { AspectRatio }

What it pulls in

npm packages

@radix-ui/react-aspect-ratio

Files it writes

registry/nova/ui/aspect-ratio.tsx

More from rivelle

All 83 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Accordionaccordion	rivelle	Components	Free	2 deps
Alertalert	rivelle	Components	Free	1 dep
Alert Dialogalert-dialog	rivelle	Components	Free	1 dep
Avataravatar	rivelle	Components	Free	1 dep
Badgebadge	rivelle	Components	Free	2 deps
Breadcrumbbreadcrumb	rivelle	Components	Free	2 deps
Buttonbutton	rivelle	Components	Free	2 deps
Button Groupbutton-group	rivelle	Components	Free	no deps