Bottom Bar
Fine bande d'interface epinglee au bas d'une coque de canevas comme hote calme pour les bandes d'activite, les pastilles de statut et les indicateurs ambiants. Installez Bottom Bar depuis le registre VLLNT UI avec la CLI shadcn.
Fine bande d'interface epinglee au bas d'une coque de canevas comme hote calme pour les bandes d'activite, les pastilles de statut et les indicateurs ambiants. Fait partie de la famille navigation 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 Bottom Bar 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/bottom-bar.jsonSource
import type { ReactNode } from "react";
import { cn } from "../../lib/utils";
export type BottomBarProps = React.ComponentPropsWithoutRef<"div"> & {
center?: ReactNode;
leading?: ReactNode;
trailing?: ReactNode;
};
const BottomBar = ({
center,
className,
leading,
ref,
trailing,
...props
}: BottomBarProps & { ref?: React.Ref<HTMLDivElement> }) => (
<div
className={cn(
"flex min-h-14 items-center gap-3 px-4 py-3 text-sm",
className,
)}
ref={ref}
{...props}
>
<div className="flex min-w-0 flex-1 items-center gap-2">{leading}</div>
{center ? (
<div className="flex shrink-0 items-center justify-center gap-2">
{center}
</div>
) : null}
<div className="flex min-w-0 flex-1 items-center justify-end gap-2">
{trailing}
</div>
</div>
);
BottomBar.displayName = "BottomBar";
export { BottomBar };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.