); } function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) { return (

svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className, )} {...props} /> ); } export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge }; ``` ## Usage An image element with a fallback for representing a user. ```tsx import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; ``` --- URL: https://landorui.landorestate.com/components/badge.md A small label for status, counts, or categories. # Badge A small label for status, counts, or categories. ## Installation ```bash npx shadcn@latest add https://landorui.landorestate.com/r/badge.json ``` [Registry JSON](https://landorui.landorestate.com/r/badge.json) ## Preview ```tsx import { Badge } from "@/components/ui/badge"; export function Preview() { return (

Default Secondary Outline Destructive

); } ``` ## Source ### ui/badge.tsx ```tsx import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const badgeVariants = cva( "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, }, ); function Badge({ className, variant = "default", render, ...props }: useRender.ComponentProps<"span"> & VariantProps) { return useRender({ defaultTagName: "span", props: mergeProps<"span">( { className: cn(badgeVariants({ variant }), className), }, props, ), render, state: { slot: "badge", variant, }, }); } export { Badge, badgeVariants }; ``` ## Usage A small label for status, counts, or categories. ```tsx import { Badge } from "@/components/ui/badge"; ``` --- URL: https://landorui.landorestate.com/components/breadcrumb.md Navigation showing the current page's location hierarchy. # Breadcrumb Navigation showing the current page's location hierarchy. ## Installation ```bash npx shadcn@latest add https://landorui.landorestate.com/r/breadcrumb.json ``` [Registry JSON](https://landorui.landorestate.com/r/breadcrumb.json) ## Preview ```tsx import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; export function Preview() { return ( Home Components ); } ``` ## Source ### ui/breadcrumb.tsx ```tsx import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"; import * as React from "react"; import { cn } from "@/lib/utils"; function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) { return (

); } function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) { return (

); } function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) { return useRender({ defaultTagName: "a", props: mergeProps<"a">( { className: cn("transition-colors hover:text-foreground", className), }, props, ), render, state: { slot: "breadcrumb-link", }, }); } function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { return ( ); } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) { return (
svg]:size-3.5", className)} {...props} > {children ?? }

) { return ( ); } export { Button, buttonVariants }; ``` ## Usage Use `Button` for actions, links, and icon controls. ```tsx import { Button } from "@/components/ui/button"; ``` --- URL: https://landorui.landorestate.com/components/card.md A flexible container for grouping related content. # Card A flexible container for grouping related content. ## Installation ```bash npx shadcn@latest add https://landorui.landorestate.com/r/card.json ``` [Registry JSON](https://landorui.landorestate.com/r/card.json) ## Preview ```tsx import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; export function Preview() { return ( Card title A short description of the card. Card content goes here. Footer ); } ``` ## Source ### ui/card.tsx ```tsx import * as React from "react"; import { cn } from "@/lib/utils"; function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { return (

img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className, )} {...props} /> ); } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

); } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

); } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

); } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

); } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }; ``` ## Usage A flexible container for grouping related content. ```tsx import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; ``` --- URL: https://landorui.landorestate.com/components/carousel.md A slideshow for cycling through images or content. # Carousel A slideshow for cycling through images or content. ## Installation ```bash npx shadcn@latest add https://landorui.landorestate.com/r/carousel.json ``` [Registry JSON](https://landorui.landorestate.com/r/carousel.json) ## Preview ```tsx import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/carousel"; export function Preview() { return ( {Array.from({ length: 5 }, (_, i) => `Slide ${i + 1}`).map((slide) => (

{slide}

))} ); } ``` ## Source ### ui/carousel.tsx ```tsx "use client"; import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"; import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type CarouselApi = UseEmblaCarouselType[1]; type UseCarouselParameters = Parameters; type CarouselOptions = UseCarouselParameters[0]; type CarouselPlugin = UseCarouselParameters[1]; type CarouselProps = { opts?: CarouselOptions; plugins?: CarouselPlugin; orientation?: "horizontal" | "vertical"; setApi?: (api: CarouselApi) => void; }; type CarouselContextProps = { carouselRef: ReturnType[0]; api: ReturnType[1]; scrollPrev: () => void; scrollNext: () => void; canScrollPrev: boolean; canScrollNext: boolean; } & CarouselProps; const CarouselContext = React.createContext(null); function useCarousel() { const context = React.useContext(CarouselContext); if (!context) { throw new Error("useCarousel must be used within a "); } return context; } function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps) { const [carouselRef, api] = useEmblaCarousel( { ...opts, axis: orientation === "horizontal" ? "x" : "y", }, plugins, ); const [canScrollPrev, setCanScrollPrev] = React.useState(false); const [canScrollNext, setCanScrollNext] = React.useState(false); const onSelect = React.useCallback((api: CarouselApi) => { if (!api) return; setCanScrollPrev(api.canScrollPrev()); setCanScrollNext(api.canScrollNext()); }, []); const scrollPrev = React.useCallback(() => { api?.scrollPrev(); }, [api]); const scrollNext = React.useCallback(() => { api?.scrollNext(); }, [api]); const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (event.key === "ArrowLeft") { event.preventDefault(); scrollPrev(); } else if (event.key === "ArrowRight") { event.preventDefault(); scrollNext(); } }, [scrollPrev, scrollNext], ); React.useEffect(() => { if (!api || !setApi) return; setApi(api); }, [api, setApi]); React.useEffect(() => { if (!api) return; onSelect(api); api.on("reInit", onSelect); api.on("select", onSelect); return () => { api?.off("select", onSelect); }; }, [api, onSelect]); return (

{children}

); } function CarouselContent({ className, ...props }: React.ComponentProps<"div">) { const { carouselRef, orientation } = useCarousel(); return (

); } function CarouselItem({ className, ...props }: React.ComponentProps<"div">) { const { orientation } = useCarousel(); return (

); } function CarouselPrevious({ className, variant = "outline", size = "icon-sm", ...props }: React.ComponentProps) { const { orientation, scrollPrev, canScrollPrev } = useCarousel(); return ( ); } function CarouselNext({ className, variant = "outline", size = "icon-sm", ...props }: React.ComponentProps) { const { orientation, scrollNext, canScrollNext } = useCarousel(); return ( ); } export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, }; ``` ## Usage A slideshow for cycling through images or content. ```tsx import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/carousel"; ``` --- URL: https://landorui.landorestate.com/components/chart.md Composable chart components built on Recharts. # Chart Composable chart components built on Recharts. ## Installation ```bash npx shadcn@latest add https://landorui.landorestate.com/r/chart.json ``` [Registry JSON](https://landorui.landorestate.com/r/chart.json) ## Preview ```tsx import { Bar, BarChart, XAxis } from "recharts"; import { type ChartConfig, ChartContainer } from "@/components/ui/chart"; const data = [ { month: "January", desktop: 186 }, { month: "February", desktop: 305 }, { month: "March", desktop: 237 }, { month: "April", desktop: 273 }, { month: "May", desktop: 209 }, ]; const config = { desktop: { label: "Desktop", color: "var(--chart-1)" }, } satisfies ChartConfig; export function Preview() { return ( ); } ``` ## Source ### ui/chart.tsx ```tsx "use client"; import * as React from "react"; import * as RechartsPrimitive from "recharts"; import type { TooltipValueType } from "recharts"; import { cn } from "@/lib/utils"; // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const; const INITIAL_DIMENSION = { width: 320, height: 200 } as const; type TooltipNameType = number | string; export type ChartConfig = Record< string, { label?: React.ReactNode; icon?: React.ComponentType; } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) >; type ChartContextProps = { config: ChartConfig; }; const ChartContext = React.createContext(null); function useChart() { const context = React.useContext(ChartContext); if (!context) { throw new Error("useChart must be used within a "); } return context; } function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }: React.ComponentProps<"div"> & { config: ChartConfig; children: React.ComponentProps["children"]; initialDimension?: { width: number; height: number; }; }) { const uniqueId = React.useId(); const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`; return (

{children}

); } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color); if (!colorConfig.length) { return null; } return (