Relación de aspecto

16 / 9

import { AspectRatio } from "@/components/ui/aspect-ratio"

export default function AspectRatioDemo() {
  return (
    <AspectRatio
      ratio={16 / 9}
      className="bg-muted flex items-center justify-center rounded-md"
    >
      <span className="text-muted-foreground text-sm">16 / 9</span>
    </AspectRatio>
  )
}

Instalación

npx logic2b@next add aspect-ratio

¿Trabajas con un asistente de IA? Copia este prompt en Claude Code, Cursor o Copilot: incluye los pasos de instalación, una alternativa sin CLI y una lista de verificación.

Add the "aspect-ratio" item from the logic2b ui registry (https://ui.logic2b.com) to this project. Follow every step and verify at the end.

## Steps

1. If the project has no `components.json` yet, set up logic2b ui first:

   ```bash
   npx logic2b@next init
   ```

2. Install the item (the CLI resolves registry dependencies automatically):

   ```bash
   npx logic2b@next add aspect-ratio
   ```

3. Install any npm dependencies the command prints.

## If the CLI is not available

Do it manually from the registry payload:

1. Fetch https://ui.logic2b.com/r/aspect-ratio.json.
2. Write every entry in `files[]` to its mapped project path (see below).
3. Repeat (recursively) for each name in `registryDependencies`.
4. Install every package listed in `dependencies` across those payloads.

## Registry reference

- Index of every item: https://ui.logic2b.com/r/index.json
- Item payload (full source): https://ui.logic2b.com/r/<name>.json
- Usage examples per item: https://ui.logic2b.com/r/demos/index.json → https://ui.logic2b.com/r/demos/<demo>.json
- Docs index for agents: https://ui.logic2b.com/llms.txt (full docs: https://ui.logic2b.com/llms-full.txt)
- Every docs page is Markdown when you append `.md` to its URL.

Registry file paths map to project paths like this:
- `ui/*` → `@/components/ui/*`
- `blocks/<name>/*` → `@/components/*`
- `charts/*` → `@/components/charts/*`
- `hooks/*` → `@/hooks/*`
- `lib/utils.ts` → `@/lib/utils.ts`
- `theme.css` → next to the project's Tailwind entry stylesheet

## Conventions (do not break these)

- Tailwind CSS v4 (CSS-first config; no tailwind.config.js needed) and React 19.
- All colors go through semantic tokens (`bg-primary`, `text-muted-foreground`,
  `border-border`, …). Never hardcode hex/oklch values in components.
- Dark mode is class-based: toggle `.dark` on `<html>`.
- Icons come from lucide-react.

## Verify before finishing

1. The dev server starts and the app renders without console errors.
2. TypeScript compiles (`tsc --noEmit` or the framework's check).
3. Components use the theme: a `<Button>` shows the primary token color,
   and toggling `.dark` on `<html>` switches the palette.

Instala las dependencias:

npm install radix-ui

Copia el contenido en ui/aspect-ratio.tsx:

"use client"

import * as React from "react"
import { AspectRatio as AspectRatioPrimitive } from "radix-ui"

function AspectRatio({
  ...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}

export { AspectRatio }

Uso

import { AspectRatio } from "@/components/ui/aspect-ratio"

<AspectRatio ratio={16 / 9}>
  <img src="..." alt="Imagen" className="rounded-md object-cover" />
</AspectRatio>

Notas de uso

También acepta cualquier propiedad estándar de div, que se reenvía al envoltorio.

Ejemplos

Cuadrado

1 / 1

import { AspectRatio } from "@/components/ui/aspect-ratio"

export default function AspectRatioSquareDemo() {
  return (
    <div className="w-48">
      <AspectRatio
        ratio={1}
        className="bg-muted flex items-center justify-center rounded-md"
      >
        <span className="text-muted-foreground text-sm">1 / 1</span>
      </AspectRatio>
    </div>
  )
}

Vertical

3 / 4

import { AspectRatio } from "@/components/ui/aspect-ratio"

export default function AspectRatioPortraitDemo() {
  return (
    <div className="w-40">
      <AspectRatio
        ratio={3 / 4}
        className="bg-muted flex items-center justify-center rounded-md"
      >
        <span className="text-muted-foreground text-sm">3 / 4</span>
      </AspectRatio>
    </div>
  )
}

Playground interactivo

Edita las propiedades del componente y revisa el JSX exacto antes de copiarlo. La vista previa se carga solo cuando esta sección entra en pantalla.

JSX generado

<AspectRatio
  ratio={1.7778}
  className="flex items-center justify-center rounded-lg bg-muted text-sm text-muted-foreground"
>Responsive media</AspectRatio>

Referencia de API

Generada a partir de las exportaciones públicas de TypeScript en src/ui/aspect-ratio.tsx. Las descripciones técnicas conservan el texto canónico del código fuente.

Ver JSON

AspectRatio

Componente

Props: React.ComponentProps<typeof AspectRatioPrimitive.Root>

Contrato de accesibilidad

Comportamiento legible por máquinas y responsabilidades de quien integra aspect-ratio. Los detalles normativos conservan el texto canónico del registro.

Ver JSON

Soporte: Contrato de composición
Patrón: layout wrapper; Radix Aspect Ratio

Semántica incorporada

Adds no semantic role and preserves the accessibility tree of its child content.

Responsabilidades de integración

Give contained images, videos and embeds their own accessible names or captions.