Key Concept
Bloc de definition mis en avant pour termes cles et une liste de glossaire. Installez Key Concept depuis le registre VLLNT UI avec la CLI shadcn.
Bloc de definition mis en avant pour termes cles et une liste de glossaire. Fait partie de la famille learning 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 Key Concept 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/key-concept.jsonSource
import type { ReactNode } from "react";
import type { HeadingTag } from "../../lib/types";
import { cn } from "../../lib/utils";
export type KeyConceptProps = {
children: ReactNode;
className?: string;
highlight?: boolean;
icon?: ReactNode;
term: string;
};
export function KeyConcept({
children,
className,
highlight = false,
icon,
term,
}: KeyConceptProps): React.ReactNode {
return (
<div
className={cn(
"my-4 rounded-lg border p-4",
highlight
? "border-primary/50 bg-primary/5"
: "border-border bg-muted/30",
className,
)}
>
<div className="flex items-start gap-3">
{icon ? (
<span className="size-5 text-primary flex-shrink-0 mt-0.5">
{icon}
</span>
) : (
<svg
className="size-5 text-primary flex-shrink-0 mt-0.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
/>
</svg>
)}
<div className="flex-1 min-w-0">
<dt className="font-bold text-foreground mb-1">{term}</dt>
<dd className="text-sm text-muted-foreground [&>p]:mb-0">
{children}
</dd>
</div>
</div>
</div>
);
}
export type GlossaryProps = {
/** Heading tag for the glossary title. Defaults to `h4`. */
as?: HeadingTag;
children: ReactNode;
className?: string;
icon?: ReactNode;
title?: string;
};
export function Glossary({
as: Heading = "h4",
children,
className,
icon,
title = "Key Terms",
}: GlossaryProps): React.ReactNode {
return (
<div className={cn("my-6", className)}>
<Heading className="font-semibold mb-3 flex items-center gap-2">
{icon ? (
<span className="size-4">{icon}</span>
) : (
<svg
className="size-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
/>
</svg>
)}
{title}
</Heading>
<dl className="space-y-2">{children}</dl>
</div>
);
}
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.