Shimmer

Texto con una luz que lo recorre, para el momento previo a la respuesta del modelo.

Reading the registry and picking a component…

1import { Shimmer } from '@/components/ui/shimmer';
2
3export function Default() {
4  return <Shimmer className="text-sm">Reading the registry and picking a component…</Shimmer>;
5}

Instalación

pnpm dlx nachui add shimmer

Anatomía

1import { Shimmer } from '@/components/ui/shimmer';

1<Shimmer>Leyendo el registro…</Shimmer>

Shimmer es un solo elemento. Pinta un degradado detrás del texto, lo recorta contra las letras y lo desliza, así la etiqueta se lee como ocupada sin necesidad de un spinner al lado.

Polimórfico

as elige la etiqueta. Por defecto es un párrafo, pero un encabezado o un span en línea funcionan igual.

Drafting the answer

Searching the docs for prompt input

Almost there

1import { Shimmer } from '@/components/ui/shimmer';
2
3export function Sizes() {
4  return (
5    <div className="flex w-full max-w-sm flex-col gap-3">
6      <Shimmer as="h3" className="text-lg font-medium" duration={2.4}>
7        Drafting the answer
8      </Shimmer>
9      <Shimmer className="text-sm">Searching the docs for prompt input</Shimmer>
10      <Shimmer as="span" className="text-xs" spread={3}>
11        Almost there
12      </Shimmer>
13    </div>
14  );
15}

Movimiento

El barrido respeta prefers-reduced-motion. Cuando el movimiento está reducido el componente renderiza texto apagado y quieto, así nada se mueve y la etiqueta se sigue leyendo como secundaria.

duration define cuánto tarda una pasada y spread ensancha la banda de luz, multiplicado por el largo del texto para que etiquetas cortas y largas barran con un ritmo parecido.

Referencia de API

Shimmer

Prop	Type	Default	Description
`as`	`ElementType`	`'p'`	Etiqueta o componente a renderizar
`duration`	`number`	`2`	Segundos de una pasada completa
`spread`	`number`	`2`	Multiplicador del ancho de la banda
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorReasoning

SiguienteSuggestion