Display
Texte d'affichage surdimensionne pilote par les tokens d'affichage, avec une revelation optionnelle respectant la reduction des animations. Installez Display depuis le registre VLLNT UI avec la CLI shadcn.
Texte d'affichage surdimensionne pilote par les tokens d'affichage, avec une revelation optionnelle respectant la reduction des animations. Fait partie de la famille core dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Display a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/display.jsonSource
import { createElement } from "react";
import { cn } from "../../lib/utils";
/** HTML element the {@link Display} primitive renders as. */
export type DisplayElement = "div" | "h1" | "h2" | "p" | "span";
/** Props for {@link Display}. */
export type DisplayProps = React.HTMLAttributes<HTMLElement> & {
/**
* Play a rise-in reveal on mount. Automatically disabled when the user
* requests reduced motion (`prefers-reduced-motion`).
*/
animated?: boolean;
as?: DisplayElement;
ref?: React.Ref<HTMLElement>;
};
const displayBase =
"font-[family-name:var(--font-display)] [font-weight:var(--font-weight-display)] text-[length:var(--font-size-display)] leading-[var(--line-height-display)] text-balance tracking-tight text-foreground";
/**
* Oversized hero/display text driven by the display tokens (`--font-display`,
* `--font-weight-display`, `--font-size-display`). Renders a non-semantic `div`
* by default — pass `as="h1"` for a hero heading. With `animated`, a rise-in
* reveal runs when the user permits motion; `prefers-reduced-motion` skips it.
* Polymorphic via `as`; forwards `ref` to the rendered element.
*
* @example
* <Display as="h1" animated>Ship faster</Display>
*/
const Display = ({
animated = false,
as = "div",
className,
ref,
...props
}: DisplayProps) =>
createElement(as, {
className: cn(
displayBase,
animated &&
"motion-safe:animate-[vllnt-animated-text-reveal_0.6s_ease-out_both]",
className,
),
ref,
...props,
});
Display.displayName = "Display";
export { Display };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.