Files
shadcn/apps/v4/public/r/styles/base-nova/aspect-ratio-example.json
zeekay 05fc512820 feat: sync upstream shadcn/ui — [email protected], v4 app, font system, chart improvements
Upstream sync from shadcn-ui/ui (1686 commits since last merge base).

Key changes:
- packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors)
- apps/v4 replaces apps/www as the primary docs/registry app
- Font system: 25+ heading font registries, font markers utility, @supports override
- Chart improvements: recharts v3 compat, radial chart fixes
- templates/ updated with monorepo variants (astro, vite, react-router, start)
- skills/shadcn AI skill definitions added
- deprecated/ removed (auth, auth-firebase, cli, www)

Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
2026-03-24 19:04:31 -07:00

17 lines
2.5 KiB
JSON

{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "aspect-ratio-example",
"title": "Aspect Ratio",
"registryDependencies": [
"aspect-ratio",
"example"
],
"files": [
{
"path": "registry/base-nova/examples/aspect-ratio-example.tsx",
"content": "import Image from \"next/image\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { AspectRatio } from \"@/registry/base-nova/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n return (\n <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n <AspectRatio16x9 />\n <AspectRatio21x9 />\n <AspectRatio1x1 />\n <AspectRatio9x16 />\n </ExampleWrapper>\n )\n}\n\nfunction AspectRatio16x9() {\n return (\n <Example title=\"16:9\" className=\"items-center justify-center\">\n <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n\nfunction AspectRatio1x1() {\n return (\n <Example title=\"1:1\" className=\"items-start\">\n <AspectRatio ratio={1 / 1} className=\"rounded-lg bg-muted\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n\nfunction AspectRatio9x16() {\n return (\n <Example title=\"9:16\" className=\"items-center justify-center\">\n <AspectRatio ratio={9 / 16} className=\"rounded-lg bg-muted\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n\nfunction AspectRatio21x9() {\n return (\n <Example title=\"21:9\" className=\"items-center justify-center\">\n <AspectRatio ratio={21 / 9} className=\"rounded-lg bg-muted\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n",
"type": "registry:example"
}
],
"type": "registry:example"
}