Aspect Ratio
Displays content within a desired ratio.
16 / 9
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/aspect-ratio.tsx
export const AspectRatio = (o) => \`<div class="relative w-full overflow-hidden \${o.class || ""}" style="aspect-ratio:\${o.ratio || "16/9"}">\${o.children}</div>\`;
Installation
$ bext ui add aspect-ratio
Copy and paste the following into src/components/ui/aspect-ratio.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/aspect-ratio.tsx
export const AspectRatio = (o) => \`<div class="relative w-full overflow-hidden \${o.class || ""}" style="aspect-ratio:\${o.ratio || "16/9"}">\${o.children}</div>\`;
On This Page