Blockquote

Una cita destacada que agrega sus propias comillas y cuelga la de apertura fuera del texto.

“We opened the store on a Friday and took our first order before lunch.”

Ana López, Studio Norte

Instalación

$ pnpm dlx shadcn@latest add @ssntl/blockquote

Uso

tsx

import { Blockquote, BlockquoteCite, BlockquoteText } from "@/components/ui/blockquote"

<Blockquote>
  <BlockquoteText>Tomamos nuestro primer pedido antes del almuerzo.</BlockquoteText>
  <BlockquoteCite>Ana López, Studio Norte</BlockquoteCite>
</Blockquote>

Reglas

Lo que este componente espera de ti, tal como se instala en components/ui/blockquote.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).

components/ui/blockquote.md

## Reglas de Blockquote

- **Comillas colgantes.** `BlockquoteText` agrega las comillas y cuelga la de apertura, así la primera letra se alinea con el nombre de abajo.
- Pasa solo las palabras, sin comillas; usa palabras de personas reales con su permiso.
- La cita nombra a la persona y luego su rol o fuente, en tamaño caption.

Abrir el archivo de reglas completo

Código

components/ui/blockquote.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

// A pull quote. Hanging marks: the component adds the curly quotes itself
// and hangs the opening one outside the block (hang-quote), so the first
// letter lines up with the text above and below. Large type also pulls back
// its side bearing (optical-edge).
function Blockquote({ className, ...props }: React.ComponentProps<"figure">) {
  return (
    <figure
      data-slot="blockquote"
      className={cn("grid gap-4", className)}
      {...props}
    />
  )
}

function BlockquoteText({
  className,
  children,
  ...props
}: React.ComponentProps<"blockquote">) {
  return (
    <blockquote
      data-slot="blockquote-text"
      className={cn("hang-quote text-title text-balance", className)}
      {...props}
    >
      <p>“{children}”</p>
    </blockquote>
  )
}

/** Who said it: name, then role or source, in caption size. */
function BlockquoteCite({
  className,
  ...props
}: React.ComponentProps<"figcaption">) {
  return (
    <figcaption
      data-slot="blockquote-cite"
      className={cn("text-caption text-muted-foreground", className)}
      {...props}
    />
  )
}

export { Blockquote, BlockquoteCite, BlockquoteText }