); } ``` ## Source ### ui/browser-window.tsx ```tsx import type * as React from "react"; import { cn } from "@/lib/utils"; type BrowserWindowProps = React.ComponentProps<"div"> & { address?: React.ReactNode; addressHref?: string; }; function BrowserWindow({ address = "about:blank", addressHref, className, children, ...props }: BrowserWindowProps) { return (

{addressHref ? ( {address} ) : ( {address} )}

{children}

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

); } function BrowserWindowImage({ className, alt, ...props }: React.ComponentProps<"img">) { return ( {alt}

); } export { BrowserWindow, BrowserWindowContent, BrowserWindowImage }; ``` ## Usage ### Basic frame Use the browser window to frame product screenshots, app previews, or embedded content with a lightweight browser chrome. ```tsx import { BrowserWindow, BrowserWindowContent } from "@/components/ui/browser-window"; export function Example() { return ( ); } ``` ### Linked address Pass `addressHref` when the address should open the live page in a new tab. ```tsx import { BrowserWindow, BrowserWindowContent } from "@/components/ui/browser-window"; export function DocsPreview() { return (

Components

); } ``` ### Screenshots Use `BrowserWindowImage` when the framed content is a static screenshot. ```tsx import { BrowserWindow, BrowserWindowContent, BrowserWindowImage, } from "@/components/ui/browser-window"; export function ScreenshotFrame() { return ( ); } ``` ### Embedded content The content area is just a styled container, so you can render live UI inside it. ```tsx import { BrowserWindow, BrowserWindowContent } from "@/components/ui/browser-window"; export function EmptyStatePreview() { return (

No environments yet.

); } ``` --- URL: https://ui.jarv.is/components/cookie-consent.md A compact cookie consent card with pluggable accept and decline handlers. # Cookie Consent A compact cookie consent card with pluggable accept and decline handlers. ## Installation ```bash npx shadcn@latest add https://ui.jarv.is/r/cookie-consent.json ``` [Registry JSON](https://ui.jarv.is/r/cookie-consent.json) ## Preview ```tsx import { CookieConsent } from "@/components/ui/cookie-consent"; export function Preview() { return ; } ``` ## Source ### ui/cookie-consent.tsx ```tsx "use client"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type CookieConsentDecision = "accepted" | "declined"; type CookieConsentProps = React.ComponentProps<"div"> & { acceptLabel?: React.ReactNode; defaultOpen?: boolean; declineLabel?: React.ReactNode; dismissOnConsent?: boolean; learnMoreHref?: string; learnMoreLabel?: React.ReactNode; onAccept?: (event: React.MouseEvent) => void; onConsentChange?: ( decision: CookieConsentDecision, event: React.MouseEvent, ) => void; onDecline?: (event: React.MouseEvent) => void; onOpenChange?: (open: boolean) => void; open?: boolean; }; function CookieConsent({ acceptLabel = "Accept", defaultOpen = true, declineLabel = "Decline", dismissOnConsent = true, learnMoreHref = "#", learnMoreLabel = "Learn more.", onAccept, onConsentChange, onDecline, onOpenChange, open, className, children, ...props }: CookieConsentProps) { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen); const isControlled = open !== undefined; const isOpen = isControlled ? open : uncontrolledOpen; const setOpen = React.useCallback( (nextOpen: boolean) => { if (!isControlled) { setUncontrolledOpen(nextOpen); } onOpenChange?.(nextOpen); }, [isControlled, onOpenChange], ); const handleConsent = React.useCallback( (decision: CookieConsentDecision, event: React.MouseEvent) => { if (decision === "accepted") { onAccept?.(event); } else { onDecline?.(event); } onConsentChange?.(decision, event); if (dismissOnConsent && !event.defaultPrevented) { setOpen(false); } }, [dismissOnConsent, onAccept, onConsentChange, onDecline, setOpen], ); if (!isOpen) { return null; } return ( ); } export { CookieConsent, type CookieConsentDecision, type CookieConsentProps }; ``` ## Usage ### Basic consent Use controlled or uncontrolled state to connect the consent card to your preference storage. ```tsx import { CookieConsent } from "@/components/ui/cookie-consent"; export function Example() { return console.log(decision)} />; } ``` ### Store the decision Use `onConsentChange` to persist the user decision in your own storage layer. ```tsx import { CookieConsent } from "@/components/ui/cookie-consent"; export function ConsentBanner() { return ( { localStorage.setItem("cookie-consent", decision); }} /> ); } ``` ### Controlled display Control `open` when the consent state comes from a loader, server response, or settings page. ```tsx "use client"; import { useState } from "react"; import { CookieConsent, type CookieConsentDecision, } from "@/components/ui/cookie-consent"; function saveCookieDecision(decision: CookieConsentDecision) { localStorage.setItem("cookie-consent", decision); } export function ControlledConsent() { const [open, setOpen] = useState(true); return ( { saveCookieDecision(decision); }} /> ); } ``` ### Custom copy Customize labels and body copy when the consent message needs to match your product policy. ```tsx import { CookieConsent } from "@/components/ui/cookie-consent"; export function AnalyticsConsent() { return ( We use privacy-friendly analytics to understand which product areas need work.{" "} Read the privacy policy. ); } ``` --- URL: https://ui.jarv.is/components/copy-button.md A button that copies text to the clipboard with optional feedback. # Copy Button A button that copies text to the clipboard with optional feedback. ## Installation ```bash npx shadcn@latest add https://ui.jarv.is/r/copy-button.json ``` [Registry JSON](https://ui.jarv.is/r/copy-button.json) ## Preview ```tsx import { CopyButton } from "@/components/ui/copy-button"; export function Preview() { return (

); } ``` ## Source ### ui/copy-button.tsx ```tsx "use client"; import { IconCheck, IconCopy } from "@tabler/icons-react"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type CopyButtonClickEvent = Parameters< NonNullable["onClick"]> >[0]; type CopyButtonProps = Omit, "children" | "value"> & { value: string | (() => string); showLabel?: boolean; copyLabel?: string; copiedLabel?: string; resetDelay?: number; onCopied?: (value: string, event: CopyButtonClickEvent) => void; onCopyError?: (error: unknown, event: CopyButtonClickEvent) => void; }; function CopyButton({ value, showLabel = false, copyLabel = "Copy to clipboard", copiedLabel = "Copied", resetDelay = 2000, variant = "ghost", size, className, disabled, onClick, onCopied, onCopyError, ...props }: CopyButtonProps) { const resetTimeoutRef = React.useRef(undefined); const [copied, setCopied] = React.useState(false); const buttonSize: React.ComponentProps["size"] = size ?? (showLabel ? "sm" : "icon-sm"); React.useEffect(() => { return () => window.clearTimeout(resetTimeoutRef.current); }, []); const handleClick = React.useCallback( async (event: CopyButtonClickEvent) => { onClick?.(event); if (event.defaultPrevented || copied || disabled) { return; } try { const textToCopy = typeof value === "function" ? value() : value; await copyTextToClipboard(textToCopy); window.clearTimeout(resetTimeoutRef.current); setCopied(true); resetTimeoutRef.current = window.setTimeout(() => setCopied(false), resetDelay); onCopied?.(textToCopy, event); } catch (error) { setCopied(false); onCopyError?.(error, event); } }, [copied, disabled, onClick, onCopied, onCopyError, resetDelay, value], ); return ( ); } async function copyTextToClipboard(value: string) { if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(value); return; } const textArea = document.createElement("textarea"); textArea.value = value; textArea.setAttribute("readonly", ""); textArea.style.position = "fixed"; textArea.style.inset = "0 auto auto -9999px"; document.body.append(textArea); textArea.select(); const copied = document.execCommand("copy"); textArea.remove(); if (!copied) { throw new Error("Copy command was rejected."); } } export { CopyButton, type CopyButtonProps }; ``` ## Usage ### Icon button Use the copy button for command snippets, tokens, URLs, and other short values. ```tsx import { CopyButton } from "@/components/ui/copy-button"; export function Example() { return ; } ``` ### Labeled button Show a label when the copy action is one of several visible actions in a toolbar or card. ```tsx import { CopyButton } from "@/components/ui/copy-button"; export function CopyInstallCommand() { return ( ); } ``` ### Dynamic values Pass a function when the value should be read at click time, such as a generated token. ```tsx import { useRef } from "react"; import { CopyButton } from "@/components/ui/copy-button"; export function CopyLatestToken() { const tokenInputRef = useRef(null); return (

tokenInputRef.current?.value ?? ""} copyLabel="Copy token" />

); } ``` ### Copy callbacks Use `onCopied` and `onCopyError` to connect copy events to your app feedback. ```tsx import { CopyButton } from "@/components/ui/copy-button"; export function CopyInviteLink({ inviteUrl }: { inviteUrl: string }) { return ( { console.log(`Copied ${value}`); }} onCopyError={(error) => { console.error("Could not copy invite link", error); }} /> ); } ``` --- URL: https://ui.jarv.is/components/copyable-field.md A selectable, horizontally scrollable field with a copy action. # Copyable Field A selectable, horizontally scrollable field with a copy action. ## Installation ```bash npx shadcn@latest add https://ui.jarv.is/r/copyable-field.json ``` [Registry JSON](https://ui.jarv.is/r/copyable-field.json) ## Preview ```tsx import { CopyableField } from "@/components/ui/copyable-field"; export function Preview() { return (

); } ``` ## Source ### ui/copyable-field.tsx ```tsx "use client"; import * as React from "react"; import { CopyButton } from "@/components/ui/copy-button"; import { Field, FieldLabel } from "@/components/ui/field"; import { InputGroup, InputGroupAddon } from "@/components/ui/input-group"; import { ScrollArea } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; type CopyableFieldCopyEvent = Parameters< NonNullable["onCopied"]> >[1]; type CopyableFieldProps = Omit, "children" | "onCopy"> & { label: React.ReactNode; value: string; copyValue?: string; showLabel?: boolean; copyLabel?: string; copiedLabel?: string; resetDelay?: number; children?: React.ReactNode; onCopy?: (value: string, event: CopyableFieldCopyEvent) => void; onCopyError?: (error: unknown, event: CopyableFieldCopyEvent) => void; }; function CopyableField({ label, value, copyValue = value, showLabel = true, copyLabel = "Copy to clipboard", copiedLabel = "Copied", resetDelay = 2000, children, className, onCopy, onCopyError, ...props }: CopyableFieldProps) { const contentRef = React.useRef(null); const handleSelect = React.useCallback(() => { if (!contentRef.current) { return; } const selection = window.getSelection(); if (!selection) { return; } const range = document.createRange(); range.selectNodeContents(contentRef.current); selection.removeAllRanges(); selection.addRange(range); }, []); return ( {label} ); } export { CopyableField, type CopyableFieldProps }; ``` ## Usage ### Commands and tokens Use a copyable field for install commands, API keys, and long single-line values. ```tsx import { CopyableField } from "@/components/ui/copyable-field"; export function Example() { return ; } ``` ### Separate display and copy values Use `copyValue` when the visible text should be shortened but the copied value should stay exact. ```tsx import { CopyableField } from "@/components/ui/copyable-field"; export function ApiKeyField() { return ( ); } ``` ### Hidden label Hide the visual label when the surrounding UI already provides context. The label remains available to assistive technology. ```tsx import { CopyableField } from "@/components/ui/copyable-field"; export function CompactTokenField({ token }: { token: string }) { return ; } ``` ### Custom rendered value Render children when you need syntax highlighting or visual masking, while keeping the copied value plain. ```tsx import { CopyableField } from "@/components/ui/copyable-field"; export function HighlightedCommand() { return ( pnpm dlx{" "} shadcn@latest add https://ui.jarv.is/r/toast.json ); } ``` ### Copy callbacks Use callbacks to track successful copies or surface clipboard failures. ```tsx import { CopyableField } from "@/components/ui/copyable-field"; export function TrackedCopyField({ command }: { command: string }) { return ( { console.log(`Copied ${value}`); }} onCopyError={(error) => { console.error("Could not copy command", error); }} /> ); } ``` --- URL: https://ui.jarv.is/components/parallax-card.md A generic card with pointer-driven tilt, glare, and parallax motion. # Parallax Card A generic card with pointer-driven tilt, glare, and parallax motion. ## Installation ```bash npx shadcn@latest add https://ui.jarv.is/r/parallax-card.json ``` [Registry JSON](https://ui.jarv.is/r/parallax-card.json) ## Preview ```tsx import { ParallaxCard } from "@/components/ui/parallax-card"; export function Preview() { return (

Mission Control

Orbital telemetry

Orbit

LEO

Speed

7.8k

Signal

98%

); } ``` ## Source ### ui/parallax-card.tsx ```tsx "use client"; import { type HTMLMotionProps, motion, type MotionStyle, useMotionTemplate, useMotionValue, useSpring, useTransform, } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; type SpringConfig = { stiffness: number; damping: number; mass: number; }; type ParallaxCardProps = Omit, "children"> & { children: React.ReactNode; contentClassName?: string; contentStyle?: MotionStyle; glareClassName?: string; disabled?: boolean; maxTilt?: number; perspective?: number; scale?: number; glare?: boolean; glareMaxOpacity?: number; parallaxShift?: number; spring?: Partial; }; const defaultSpring = { stiffness: 300, damping: 30, mass: 0.5, } satisfies SpringConfig; function ParallaxCard({ children, className, contentClassName, contentStyle, glareClassName, disabled = false, maxTilt = 8, perspective = 800, scale: hoverScale = 1.02, glare = true, glareMaxOpacity = 0.16, parallaxShift = 6, spring, style, onMouseEnter, onMouseLeave, onMouseMove, ...props }: ParallaxCardProps) { const cardRef = React.useRef(null); const rectRef = React.useRef(null); const [prefersStaticCard, setPrefersStaticCard] = React.useState(false); const stiffness = spring?.stiffness ?? defaultSpring.stiffness; const damping = spring?.damping ?? defaultSpring.damping; const mass = spring?.mass ?? defaultSpring.mass; React.useEffect(() => { const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); const finePointer = window.matchMedia("(pointer: fine)"); const updatePreference = () => { setPrefersStaticCard(reducedMotion.matches || !finePointer.matches); }; updatePreference(); reducedMotion.addEventListener("change", updatePreference); finePointer.addEventListener("change", updatePreference); return () => { reducedMotion.removeEventListener("change", updatePreference); finePointer.removeEventListener("change", updatePreference); }; }, []); const springConfig = React.useMemo( () => ({ stiffness, damping, mass }), [stiffness, damping, mass], ); const mouseX = useMotionValue(0.5); const mouseY = useMotionValue(0.5); const isHovered = useMotionValue(0); const rawRotateY = useTransform(mouseX, [0, 1], [maxTilt, -maxTilt]); const rawRotateX = useTransform(mouseY, [0, 1], [-maxTilt, maxTilt]); const rawScale = useTransform(isHovered, [0, 1], [1, hoverScale]); const rotateX = useSpring(rawRotateX, springConfig); const rotateY = useSpring(rawRotateY, springConfig); const scale = useSpring(rawScale, springConfig); const hoverOpacity = useSpring(isHovered, springConfig); const contentX = useSpring( useTransform(mouseX, [0, 1], [parallaxShift, -parallaxShift]), springConfig, ); const contentY = useSpring( useTransform(mouseY, [0, 1], [parallaxShift, -parallaxShift]), springConfig, ); const glareX = useTransform(mouseX, [0, 1], [0, 100]); const glareY = useTransform(mouseY, [0, 1], [0, 100]); const glareOpacity = useTransform(hoverOpacity, [0, 1], [0, glareMaxOpacity]); const glareBackground = useMotionTemplate`radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255, 255, 255, 0.38) 0%, transparent 58%)`; const isStatic = disabled || prefersStaticCard; const cardMotionStyle: MotionStyle = isStatic ? {} : { transformPerspective: perspective, rotateX, rotateY, scale }; const contentMotionStyle: MotionStyle = isStatic ? {} : { x: contentX, y: contentY }; function handleMouseEnter(event: React.MouseEvent) { onMouseEnter?.(event); if (isStatic) { return; } rectRef.current = cardRef.current?.getBoundingClientRect() ?? null; isHovered.set(1); } function handleMouseMove(event: React.MouseEvent) { onMouseMove?.(event); if (isStatic || !rectRef.current) { return; } const rect = rectRef.current; const x = (event.clientX - rect.left) / rect.width; const y = (event.clientY - rect.top) / rect.height; mouseX.set(Math.max(0, Math.min(1, x))); mouseY.set(Math.max(0, Math.min(1, y))); } function handleMouseLeave(event: React.MouseEvent) { onMouseLeave?.(event); if (isStatic) { return; } mouseX.set(0.5); mouseY.set(0.5); isHovered.set(0); rectRef.current = null; } return ( {children} {glare && ( ); } export { ParallaxCard }; ``` ## Usage ### Basic card Use parallax card to add subtle pointer-driven depth to any card contents. ```tsx import { ParallaxCard } from "@/components/ui/parallax-card"; export function Example() { return (

Launch Window

Add your own content and keep the motion shell reusable.

); } ``` ### Tune the motion Lower the tilt and hover scale for dense product cards, or increase them for expressive marketing surfaces. ```tsx import { ParallaxCard } from "@/components/ui/parallax-card"; export function ProductMetricCard() { return (

Pipeline health

98.4%

); } ``` ### Disable motion Set `disabled` when the same card needs to render in a static context such as a print view, thumbnail grid, or automated screenshot. ```tsx import { ParallaxCard } from "@/components/ui/parallax-card"; export function StaticPreviewCard() { return (

Static preview

); } ``` ### Custom layers Use the content and glare class hooks when the card needs tighter art direction. ```tsx import { ParallaxCard } from "@/components/ui/parallax-card"; export function ArtworkCard() { return (

Campaign artwork

); } ``` --- URL: https://ui.jarv.is/components/scroll-area.md A scroll container with overlay scrollbars and automatic edge fades. # Scroll Area A scroll container with overlay scrollbars and automatic edge fades. ## Installation ```bash npx shadcn@latest add https://ui.jarv.is/r/scroll-area.json ``` [Registry JSON](https://ui.jarv.is/r/scroll-area.json) ## Preview ```tsx import { ScrollArea } from "@/components/ui/scroll-area"; export function Preview() { const activity = [ "Renewed domainstack.io", "Queued DNS audit", "Pinned registrar notes", "Updated MX records", "Synced billing contact", "Archived expired domains", "Reviewed transfer lock", "Checked nameserver drift", "Scheduled renewal reminder", "Exported portfolio report", ]; return (

{activity.map((item, index) => (

{item} #{index + 1}

))}

); } ``` ## Source ### ui/scroll-area.tsx ```tsx "use client"; import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"; import type * as React from "react"; import { cn } from "@/lib/utils"; type ScrollAreaProps = ScrollAreaPrimitive.Root.Props & { scrollFade?: boolean; scrollbarGutter?: boolean; hideScrollbar?: boolean; scrollRef?: React.Ref; contentRef?: React.Ref; }; function ScrollArea({ className, children, scrollFade = true, scrollbarGutter = false, hideScrollbar = false, scrollRef, contentRef, ...props }: ScrollAreaProps) { return ( {children} {!hideScrollbar && ( <> )} ); } function ScrollBar({ className, orientation = "vertical", ...props }: ScrollAreaPrimitive.Scrollbar.Props) { return ( ); } export { ScrollArea, ScrollBar }; ``` ## Usage ### Basic viewport Use the scroll area when content needs a compact viewport with subtle edge fades and overlay scrollbars. ```tsx import { ScrollArea } from "@/components/ui/scroll-area"; export function Example() { return ...; } ``` ### Lists and sidebars Give the root a fixed height and put normal block content inside. ```tsx import { ScrollArea } from "@/components/ui/scroll-area"; export function ActivityList({ items }: { items: string[] }) { return (

{items.map((item) => (

{item}

))}

); } ``` ### Horizontal overflow Use it for long single-line content too. The edge fade works on both axes. ```tsx import { ScrollArea } from "@/components/ui/scroll-area"; export function CommandStrip() { return (

        bunx --bun shadcn@latest add https://ui.jarv.is/r/scroll-area.json

); } ``` ### Disable chrome Turn off fades or scrollbars when another surface already supplies that affordance. ```tsx import type { ReactNode } from "react"; import { ScrollArea } from "@/components/ui/scroll-area"; export function PlainScrollablePanel({ children }: { children: ReactNode }) { return ( {children} ); } ``` ### Access scroll nodes Use refs when you need imperative scroll restoration or measurement. ```tsx import { useRef } from "react"; import { ScrollArea } from "@/components/ui/scroll-area"; export function RestorableLog({ entries }: { entries: string[] }) { const scrollRef = useRef(null); return ( {entries.map((entry) => (

{entry}

))} ); } ``` --- URL: https://ui.jarv.is/components/stepper.md A keyboard-navigable multi-step flow with flexible triggers and panels. # Stepper A keyboard-navigable multi-step flow with flexible triggers and panels. ## Installation ```bash npx shadcn@latest add https://ui.jarv.is/r/stepper.json ``` [Registry JSON](https://ui.jarv.is/r/stepper.json) ## Preview ```tsx import { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperSeparator, StepperTitle, StepperTrigger, } from "@/components/ui/stepper"; export function Preview() { return ( 1 Profile Owner details 2 Domains Portfolio setup 3 Review Final check

Add the account owner and billing contact.

Choose the domains that should share this renewal workflow.

Confirm the policy before scheduling renewal reminders.

); } ``` ## Source ### ui/stepper.tsx ```tsx "use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import * as React from "react"; import { cn } from "@/lib/utils"; type StepperOrientation = "horizontal" | "vertical"; type StepState = "active" | "completed" | "inactive"; type StepIndicators = Partial>; type StepperContextValue = { activeStep: number; setActiveStep: (step: number) => void; stepsCount: number; orientation: StepperOrientation; indicators: StepIndicators; triggerNodes: HTMLButtonElement[]; registerTrigger: (node: HTMLButtonElement) => () => void; focusNext: (currentIndex: number) => void; focusPrevious: (currentIndex: number) => void; focusFirst: () => void; focusLast: () => void; }; type StepItemContextValue = { step: number; state: StepState; isDisabled: boolean; isLoading: boolean; }; type StepperProps = React.ComponentProps<"div"> & { defaultValue?: number; value?: number; onValueChange?: (value: number) => void; orientation?: StepperOrientation; indicators?: StepIndicators; }; type StepperItemProps = React.ComponentProps<"div"> & { step: number; completed?: boolean; disabled?: boolean; loading?: boolean; }; type StepperTriggerState = Record & { state: StepState; isLoading: boolean; isSelected: boolean; }; type StepperTriggerProps = Omit, "children"> & { render?: useRender.RenderProp; children?: React.ReactNode; }; type StepperContentProps = React.ComponentProps<"div"> & { value: number; forceMount?: boolean; }; const defaultIndicators = {}; const StepperContext = React.createContext(null); const StepItemContext = React.createContext(null); function Stepper({ defaultValue = 1, value, onValueChange, orientation = "horizontal", indicators = defaultIndicators, className, children, ...props }: StepperProps) { const [uncontrolledStep, setUncontrolledStep] = React.useState(defaultValue); const [triggerNodes, setTriggerNodes] = React.useState([]); const activeStep = value ?? uncontrolledStep; const setActiveStep = React.useCallback( (step: number) => { if (value === undefined) { setUncontrolledStep(step); } onValueChange?.(step); }, [onValueChange, value], ); const registerTrigger = React.useCallback((node: HTMLButtonElement) => { setTriggerNodes((currentNodes) => currentNodes.includes(node) ? currentNodes : [...currentNodes, node], ); return () => { setTriggerNodes((currentNodes) => currentNodes.filter((currentNode) => currentNode !== node)); }; }, []); const focusTrigger = React.useCallback( (index: number) => { triggerNodes[index]?.focus(); }, [triggerNodes], ); const focusNext = React.useCallback( (currentIndex: number) => { if (triggerNodes.length === 0) { return; } focusTrigger((currentIndex + 1) % triggerNodes.length); }, [focusTrigger, triggerNodes.length], ); const focusPrevious = React.useCallback( (currentIndex: number) => { if (triggerNodes.length === 0) { return; } focusTrigger((currentIndex - 1 + triggerNodes.length) % triggerNodes.length); }, [focusTrigger, triggerNodes.length], ); const focusFirst = React.useCallback(() => focusTrigger(0), [focusTrigger]); const focusLast = React.useCallback( () => focusTrigger(triggerNodes.length - 1), [focusTrigger, triggerNodes.length], ); const contextValue = React.useMemo( () => ({ activeStep, setActiveStep, stepsCount: countStepperItems(children), orientation, indicators, triggerNodes, registerTrigger, focusNext, focusPrevious, focusFirst, focusLast, }), [ activeStep, children, focusFirst, focusLast, focusNext, focusPrevious, indicators, orientation, registerTrigger, setActiveStep, triggerNodes, ], ); return (

{children}

); } function StepperItem({ step, completed = false, disabled = false, loading = false, className, children, ...props }: StepperItemProps) { const { activeStep } = useStepper(); const state = getStepState({ completed, step, activeStep }); const isLoading = loading && step === activeStep; const contextValue = React.useMemo( () => ({ step, state, isDisabled: disabled, isLoading }), [disabled, isLoading, state, step], ); return (

{children}

); } function StepperTrigger({ render, className, children, tabIndex, ...props }: StepperTriggerProps) { const { step, state, isDisabled, isLoading } = useStepItem(); const { activeStep, setActiveStep, registerTrigger, triggerNodes, focusNext, focusPrevious, focusFirst, focusLast, } = useStepper(); const triggerRef = React.useRef(null); const isSelected = activeStep === step; const triggerId = getTriggerId(step); const panelId = getPanelId(step); React.useEffect(() => { const triggerNode = triggerRef.current; if (!triggerNode) { return undefined; } return registerTrigger(triggerNode); }, [registerTrigger]); const currentIndex = triggerRef.current ? triggerNodes.indexOf(triggerRef.current) : -1; const triggerState = React.useMemo( () => ({ state, isLoading, isSelected }), [isLoading, isSelected, state], ); const defaultProps = { type: "button" as const, role: "tab" as const, id: triggerId, "aria-selected": isSelected, "aria-controls": panelId, tabIndex: getTriggerTabIndex(tabIndex, isSelected), "data-slot": "stepper-trigger", "data-state": state, "data-loading": isLoading ? "" : undefined, className: cn( "inline-flex items-center gap-3 rounded-full outline-none select-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-60", className, ), disabled: isDisabled, children, onClick: () => setActiveStep(step), onKeyDown: (event: React.KeyboardEvent) => { switch (event.key) { case "ArrowRight": case "ArrowDown": event.preventDefault(); if (currentIndex !== -1) { focusNext(currentIndex); } break; case "ArrowLeft": case "ArrowUp": event.preventDefault(); if (currentIndex !== -1) { focusPrevious(currentIndex); } break; case "Home": event.preventDefault(); focusFirst(); break; case "End": event.preventDefault(); focusLast(); break; case "Enter": case " ": event.preventDefault(); setActiveStep(step); break; } }, }; return useRender({ defaultTagName: "button", render, ref: triggerRef, state: triggerState, props: mergeProps<"button">(defaultProps, props), }); } function StepperIndicator({ children, className, ...props }: React.ComponentProps<"div">) { const { state, isLoading } = useStepItem(); const { indicators } = useStepper(); const indicator = isLoading ? indicators.loading : indicators[state]; return (

{indicator ?? children}

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

); } function StepperTitle({ className, ...props }: React.ComponentProps<"span">) { const { state } = useStepItem(); return ( ); } function StepperDescription({ className, ...props }: React.ComponentProps<"div">) { const { state } = useStepItem(); return (

); } function StepperNav({ children, className, style, ...props }: React.ComponentProps<"nav">) { const { activeStep, orientation, stepsCount } = useStepper(); const gridTemplateColumns = orientation === "horizontal" && stepsCount > 0 ? Array.from({ length: stepsCount }, (_, index) => index < stepsCount - 1 ? "auto 1fr" : "auto", ).join(" ") : undefined; return ( ); } function StepperPanel({ className, ...props }: React.ComponentProps<"div">) { return

; } function StepperContent({ value, forceMount, children, className, ...props }: StepperContentProps) { const { activeStep } = useStepper(); const isActive = value === activeStep; if (!forceMount && !isActive) { return null; } return ( ); } function useStepper() { const ctx = React.useContext(StepperContext); if (!ctx) { throw new Error("useStepper must be used within ."); } return ctx; } function useStepItem() { const ctx = React.useContext(StepItemContext); if (!ctx) { throw new Error("useStepItem must be used within ."); } return ctx; } function countStepperItems(node: React.ReactNode): number { let count = 0; React.Children.forEach(node, (child) => { if (!React.isValidElement(child)) { return; } if (child.type === StepperItem) { count++; } if (React.isValidElement<{ children?: React.ReactNode }>(child) && child.props.children) { count += countStepperItems(child.props.children); } }); return count; } function getStepState({ completed, step, activeStep, }: { completed: boolean; step: number; activeStep: number; }): StepState { if (completed || step < activeStep) { return "completed"; } if (activeStep === step) { return "active"; } return "inactive"; } function getTriggerTabIndex( tabIndex: StepperTriggerProps["tabIndex"], isSelected: boolean, ): number { if (typeof tabIndex === "number") { return tabIndex; } return isSelected ? 0 : -1; } function getTriggerId(step: number): string { return `stepper-tab-${step}`; } function getPanelId(step: number): string { return `stepper-panel-${step}`; } Stepper.displayName = "Stepper"; StepperItem.displayName = "StepperItem"; StepperTrigger.displayName = "StepperTrigger"; StepperIndicator.displayName = "StepperIndicator"; StepperSeparator.displayName = "StepperSeparator"; StepperTitle.displayName = "StepperTitle"; StepperDescription.displayName = "StepperDescription"; StepperNav.displayName = "StepperNav"; StepperPanel.displayName = "StepperPanel"; StepperContent.displayName = "StepperContent"; export { Stepper, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription, StepperPanel, StepperContent, StepperNav, useStepper, useStepItem, type StepperProps, type StepperItemProps, type StepperTriggerProps, type StepperContentProps, }; ``` ## Usage ### Basic flow Use the stepper for multi-step forms, onboarding, and guided setup flows. ```tsx import { Stepper, StepperItem, StepperNav, StepperTrigger } from "@/components/ui/stepper"; export function Example() { return ( Profile ); } ``` ### Step content Pair `StepperNav` with `StepperPanel` and one `StepperContent` per step. ```tsx import { Stepper, StepperContent, StepperItem, StepperNav, StepperPanel, StepperTrigger, } from "@/components/ui/stepper"; export function OnboardingStepper() { return ( Profile Team Profile form Team form ); } ``` ### Controlled state Control `value` when the active step is driven by form validation or route state. ```tsx "use client"; import { useState } from "react"; import { Stepper, StepperItem, StepperNav, StepperTrigger } from "@/components/ui/stepper"; export function ControlledStepper({ billingEnabled }: { billingEnabled: boolean }) { const [step, setStep] = useState(1); return ( 1}> Account Billing ); } ``` ### Titles and indicators Compose indicators, titles, descriptions, and separators for richer progress navigation. ```tsx import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperNav, StepperSeparator, StepperTitle, StepperTrigger, } from "@/components/ui/stepper"; export function RichStepperNav() { return ( 1 Profile Owner details 2 Review Final check ); } ``` ### Vertical orientation Use `orientation="vertical"` for narrow sidebars or long setup flows. ```tsx import { Stepper, StepperItem, StepperNav, StepperTrigger } from "@/components/ui/stepper"; export function VerticalStepper() { return ( Connect Configure Review ); } ``` --- URL: https://ui.jarv.is/components/tipover.md A touch-friendly tooltip/popover hybrid. # Tipover A touch-friendly tooltip/popover hybrid. ## Installation ```bash npx shadcn@latest add https://ui.jarv.is/r/tipover.json ``` [Registry JSON](https://ui.jarv.is/r/tipover.json) ## Preview ```tsx import { Button } from "@/components/ui/button"; import { Tipover, TipoverContent, TipoverTrigger } from "@/components/ui/tipover"; export function Preview() { return (

}>Wtf is a Tipover? A tooltip on hover devices and a popover on touch devices.

Hover, focus, or tap the trigger to use the same hint across pointer types.

); } ``` ## Source ### ui/tipover.tsx ```tsx "use client"; import { Popover as PopoverPrimitive } from "@base-ui/react/popover"; import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"; import * as React from "react"; import { cn } from "@/lib/utils"; import { usePointerCapability } from "@/hooks/use-pointer-capability"; type TipoverContextValue = { isTouchDevice: boolean; }; const TipoverContext = React.createContext(null); function Tipover({ ...props }: PopoverPrimitive.Root.Props & TooltipPrimitive.Root.Props) { const { isTouchDevice } = usePointerCapability(); const contextValue = React.useMemo(() => ({ isTouchDevice }), [isTouchDevice]); return ( {isTouchDevice ? ( ) : ( )} ); } function TipoverTrigger({ nativeButton, closeDelay, ...props }: Omit & Pick) { const ctx = useTipoverContext("TipoverTrigger"); const { Trigger } = ctx.isTouchDevice ? PopoverPrimitive : TooltipPrimitive; const triggerProps = ctx.isTouchDevice ? ({ nativeButton, openOnHover: true, } satisfies PopoverPrimitive.Trigger.Props) : ({ closeDelay: closeDelay ?? 150, } satisfies TooltipPrimitive.Trigger.Props); return ; } function TipoverContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }: TooltipPrimitive.Popup.Props & PopoverPrimitive.Popup.Props & Pick) { const ctx = useTipoverContext("TipoverContent"); const { Portal, Positioner, Popup, Arrow } = ctx.isTouchDevice ? PopoverPrimitive : TooltipPrimitive; return ( {children} ); } function useTipoverContext(componentName: string) { const ctx = React.useContext(TipoverContext); if (!ctx) { throw new Error(`${componentName} must be used within .`); } return ctx; } export { Tipover, TipoverTrigger, TipoverContent }; ``` ### hooks/use-pointer-capability.ts ```ts "use client"; import * as React from "react"; const HOVER_QUERY = "(hover: hover)"; const COARSE_POINTER_QUERY = "(pointer: coarse)"; type PointerCapability = { supportsHover: boolean; isCoarsePointer: boolean; isTouchDevice: boolean; }; export function usePointerCapability(): PointerCapability { const supportsHover = useMediaQuery(HOVER_QUERY); const isCoarsePointer = useMediaQuery(COARSE_POINTER_QUERY); return { supportsHover: supportsHover ?? false, isCoarsePointer: isCoarsePointer ?? false, isTouchDevice: supportsHover === false || isCoarsePointer === true, }; } function useMediaQuery(query: string) { const [matches, setMatches] = React.useState(); React.useEffect(() => { const mediaQueryList = window.matchMedia(query); const updateMatches = () => setMatches(mediaQueryList.matches); updateMatches(); mediaQueryList.addEventListener("change", updateMatches); return () => mediaQueryList.removeEventListener("change", updateMatches); }, [query]); return matches; } ``` ## Usage ### Basic hint Use a `Tipover` instead of a `Tooltip` when the information must be accessible to all users regardless of device type. ```tsx import { Tipover, TipoverContent, TipoverTrigger } from "@/components/ui/tipover"; export function Example() { return ( What is this? Helpful context. ); } ``` ### Button trigger Use `render` when the trigger should reuse your button component while keeping Base UI trigger behavior. ```tsx import { Button } from "@/components/ui/button"; import { Tipover, TipoverContent, TipoverTrigger } from "@/components/ui/tipover"; export function HelpButton() { return ( }>What is this? Shown as a tooltip on hover devices and a popover on touch. ); } ``` ### Placement Tune `side`, `align`, and offsets the same way you would with Base UI tooltip or popover positioning. ```tsx import { Tipover, TipoverContent, TipoverTrigger } from "@/components/ui/tipover"; export function InlineHelp() { return ( DNSSEC DNSSEC adds cryptographic validation to DNS responses. ); } ``` ### Rich content Keep content short, but it can contain small structured UI when a hint needs more than one line. ```tsx import { Tipover, TipoverContent, TipoverTrigger } from "@/components/ui/tipover"; export function StatusTipover() { return ( Verification paused Missing secret Add `VERCEL_TOKEN` to continue smoke tests. ); } ``` --- URL: https://ui.jarv.is/components/toast.md A stacked toast manager built on Base UI with promise helpers, inline actions, and optional expandable details. # Toast A stacked toast manager built on Base UI with promise helpers, inline actions, and optional expandable details. ## Installation ```bash npx shadcn@latest add https://ui.jarv.is/r/toast.json ``` [Registry JSON](https://ui.jarv.is/r/toast.json) ## Preview ```tsx import { Button } from "@/components/ui/button"; import { Toaster, toast } from "@/components/ui/toast"; export function Preview() { return (

); } ``` ## Source ### ui/toast.tsx ```tsx "use client"; import { Toast as ToastPrimitive } from "@base-ui/react/toast"; import type { ToastObject } from "@base-ui/react/toast"; import { IconAlertTriangle, IconCheck, IconChevronDown, IconChevronUp, IconCircleCheck, IconCircleX, IconCopy, IconInfoCircle, IconX, } from "@tabler/icons-react"; import { type CSSProperties, type MouseEvent, type ReactNode, useEffect, useRef, useState, } from "react"; import { buttonVariants } from "@/components/ui/button"; import { Spinner } from "@/components/ui/spinner"; import { cn } from "@/lib/utils"; export type ToastType = "default" | "success" | "error" | "warning" | "info" | "loading"; export type ToastPosition = | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"; export interface ToastAction { label: ReactNode; onClick: (event: MouseEvent) => void; } export interface ToastExpandableLabels { expand?: ReactNode; collapse?: ReactNode; } export interface ToastData { type: ToastType; icon?: ReactNode; action?: ToastAction; cancel?: ToastAction; dismissible?: boolean; closeButton?: boolean; richColors?: boolean; hideCopyButton?: boolean; expandableContent?: ReactNode; expandableLabels?: ToastExpandableLabels; expandableDescriptionTrigger?: boolean; actionLayout?: "inline" | "stacked-end"; actionVariant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary"; } export interface ToastOptions extends Omit { id?: string; description?: ReactNode; duration?: number; onDismiss?: () => void; onAutoClose?: () => void; } export interface PromiseStateOption { title?: ReactNode; description?: ReactNode; } export type PromiseState = | string | PromiseStateOption | ((value: T) => string | PromiseStateOption); export interface PromiseToastOptions { loading: string | PromiseStateOption; success: PromiseState; error: PromiseState; } type PromiseToastStateData = { title?: ReactNode; description?: ReactNode; type: string; data: ToastData; }; type MappedPromiseState = | string | PromiseToastStateData | ((value: T) => string | PromiseToastStateData); const toastManager = ToastPrimitive.createToastManager(); const activeToastIds = new Set(); // Base UI exposes this subscription hook under a key with a leading space. toastManager[" subscribe"]((event: { action: string; options?: { id?: string } }) => { const id = event.options?.id; if (!id) { return; } if (event.action === "add") { activeToastIds.add(id); } if (event.action === "close") { activeToastIds.delete(id); } }); function createToast( message: ReactNode, options: ToastOptions | undefined, type: ToastType, ): string { const opts = options ?? {}; const id = toastManager.add({ id: opts.id, title: message, description: opts.description, type, timeout: opts.duration, onClose: opts.onDismiss, onRemove: opts.onAutoClose, data: { type, icon: opts.icon, action: opts.action, cancel: opts.cancel, dismissible: opts.dismissible, closeButton: opts.closeButton, richColors: opts.richColors, hideCopyButton: opts.hideCopyButton, expandableContent: opts.expandableContent, expandableLabels: opts.expandableLabels, expandableDescriptionTrigger: opts.expandableDescriptionTrigger, actionLayout: opts.actionLayout, actionVariant: opts.actionVariant, }, }); activeToastIds.add(id); return id; } function mapPromiseState(state: PromiseState, type: ToastType): MappedPromiseState { if (typeof state === "string") { return state; } if (typeof state === "function") { return (value: T) => { const result = state(value); if (typeof result === "string") { return result; } return toPromiseToastStateData(result, type); }; } return toPromiseToastStateData(state, type); } function mapStaticPromiseState( state: string | PromiseStateOption, type: ToastType, ): string | PromiseToastStateData { if (typeof state === "string") { return state; } return toPromiseToastStateData(state, type); } function toPromiseToastStateData( state: PromiseStateOption, type: ToastType, ): PromiseToastStateData { return { title: state.title, description: state.description, type, data: { type }, }; } function toast(message: ReactNode, options?: ToastOptions): string { return createToast(message, options, "default"); } toast.success = (message: ReactNode, options?: ToastOptions): string => createToast(message, options, "success"); toast.error = (message: ReactNode, options?: ToastOptions): string => createToast(message, options, "error"); toast.warning = (message: ReactNode, options?: ToastOptions): string => createToast(message, options, "warning"); toast.info = (message: ReactNode, options?: ToastOptions): string => createToast(message, options, "info"); toast.loading = (message: ReactNode, options?: ToastOptions): string => createToast(message, options, "loading"); toast.promise = (promise: Promise, options: PromiseToastOptions): Promise => { return toastManager.promise(promise, { loading: mapStaticPromiseState(options.loading, "loading"), success: mapPromiseState(options.success, "success"), error: mapPromiseState(options.error, "error"), }); }; toast.dismiss = (id?: string): void => { if (id) { toastManager.close(id); activeToastIds.delete(id); return; } for (const toastId of activeToastIds) { toastManager.close(toastId); } activeToastIds.clear(); }; export { toast }; const defaultIcons: Partial> = { success: , error: , warning: , info: , loading: , }; const richColorStyles: Partial> = { success: "bg-emerald-50 border-emerald-200 text-emerald-900 dark:bg-emerald-950 dark:border-emerald-800 dark:text-emerald-100", error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-100", warning: "bg-amber-50 border-amber-200 text-amber-900 dark:bg-amber-950 dark:border-amber-800 dark:text-amber-100", info: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-100", }; const iconColorStyles: Partial> = { success: "text-emerald-500", error: "text-red-500", warning: "text-amber-500", info: "text-blue-500", loading: "text-muted-foreground", }; type ToastRootRenderState = { expanded: boolean; limited: boolean; swipeDirection: "up" | "down" | "left" | "right" | undefined; swiping: boolean; transitionStatus: "starting" | "ending" | "idle" | undefined; }; type ToastViewportStyle = CSSProperties & Record<"--toast-offset" | "--toast-gap" | "--toast-peek", string>; const toastRootBaseClassName = "group absolute w-full overflow-visible rounded-lg border text-popover-foreground select-none shadow-lg/5 z-[calc(1000-var(--toast-index))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--scale:calc(max(0,1-(var(--toast-index)*0.05)))] [--shrink:calc(1-var(--scale))] after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full after:content-['']"; const toastRootTransitionClassName = "[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"; const bottomToastRootClassName = "bottom-0 left-0 origin-bottom [--offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y,0px))] after:top-full"; const topToastRootClassName = "top-0 left-0 origin-top [--offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y,0px))] after:bottom-full"; const bottomToastRestingClassName = "h-(--height) [transform:translateX(var(--toast-swipe-movement-x,0px))_translateY(calc(var(--toast-swipe-movement-y,0px)-var(--toast-index)*var(--toast-peek)-var(--shrink)*var(--height)))_scale(var(--scale))]"; const topToastRestingClassName = "h-(--height) [transform:translateX(var(--toast-swipe-movement-x,0px))_translateY(calc(var(--toast-swipe-movement-y,0px)+var(--toast-index)*var(--toast-peek)+var(--shrink)*var(--height)))_scale(var(--scale))]"; const toastExpandedClassName = "h-(--toast-height) [transform:translateX(var(--toast-swipe-movement-x,0px))_translateY(var(--offset-y))]"; const toastSwipeExitClassNames = { down: "[transform:translateY(calc(var(--toast-swipe-movement-y,0px)+150%))]", left: "[transform:translateX(calc(var(--toast-swipe-movement-x,0px)-150%))_translateY(var(--offset-y,0px))]", right: "[transform:translateX(calc(var(--toast-swipe-movement-x,0px)+150%))_translateY(var(--offset-y,0px))]", up: "[transform:translateY(calc(var(--toast-swipe-movement-y,0px)-150%))]", } as const; function getToastType(value: unknown): ToastType { switch (value) { case "success": case "error": case "warning": case "info": case "loading": return value; default: return "default"; } } function getToastViewportClassName(position: ToastPosition) { return cn( "fixed z-[9999] box-border flex w-[min(26rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)] outline-none", position.startsWith("top") ? "top-(--toast-offset)" : "bottom-(--toast-offset)", position.endsWith("left") && "left-(--toast-offset)", position.endsWith("right") && "right-(--toast-offset)", position.endsWith("center") && "left-1/2 -translate-x-1/2", ); } function getToastRootClassName({ colorStyles, position, state, }: { colorStyles: string | undefined; position: ToastPosition; state: ToastRootRenderState; }) { const isTop = position.startsWith("top"); const isEnding = state.transitionStatus === "ending"; const isStarting = state.transitionStatus === "starting"; const swipeExitClassName = isEnding && state.swipeDirection ? toastSwipeExitClassNames[state.swipeDirection] : undefined; const shouldUseVerticalExit = isStarting || (isEnding && !state.limited && state.swipeDirection === undefined); const verticalExitClassName = isTop ? "[transform:translateY(-150%)]" : "[transform:translateY(150%)]"; const restingClassName = state.expanded ? toastExpandedClassName : isTop ? topToastRestingClassName : bottomToastRestingClassName; return cn( toastRootBaseClassName, isTop ? topToastRootClassName : bottomToastRootClassName, state.swiping ? "[transition:none]" : toastRootTransitionClassName, shouldUseVerticalExit ? verticalExitClassName : (swipeExitClassName ?? restingClassName), (isEnding || state.limited) && "opacity-0", colorStyles ?? "border-border bg-popover", ); } function CopyErrorButton({ className, text }: { className?: string; text: string }) { const resetTimeoutRef = useRef(undefined); const [copied, setCopied] = useState(false); useEffect(() => { return () => window.clearTimeout(resetTimeoutRef.current); }, []); async function handleClick() { try { await copyTextToClipboard(text); window.clearTimeout(resetTimeoutRef.current); setCopied(true); resetTimeoutRef.current = window.setTimeout(() => setCopied(false), 2000); } catch { setCopied(false); } } return ( ); } function ToastDescription({ copyText, toastData, }: { copyText?: string | null; toastData: ToastData | undefined; }) { const [open, setOpen] = useState(false); const descriptionTrigger = toastData?.expandableDescriptionTrigger ?? false; const expandableContent = toastData?.expandableContent; const labels = toastData?.expandableLabels; const expandLabel = labels?.expand ?? "Show details"; const collapseLabel = labels?.collapse ?? "Hide details"; const toggleLabel = open ? collapseLabel : expandLabel; const toggleTitle = typeof toggleLabel === "string" ? toggleLabel : undefined; const descriptionClassName = "min-w-0 text-sm leading-tight wrap-break-word text-muted-foreground/80"; function renderDescription() { const description = ; if (!copyText) { return description; } return (

{description}

); } if (!expandableContent) { return renderDescription(); } if (descriptionTrigger) { const trigger = ( ); return ( <> {copyText ? (

{trigger}

) : ( trigger )} {open ? (

{expandableContent}

) : null} ); } return ( <> {renderDescription()} {open ? (

{expandableContent}

) : null} ); } interface ToastCardProps { toast: ToastObject; icons?: Partial>; closeButton?: boolean; position: ToastPosition; richColors?: boolean; } function ToastCard({ toast: t, icons, closeButton = false, position, richColors = false, }: ToastCardProps) { const type = getToastType(t.data?.type ?? t.type); const icon = t.data?.icon ?? icons?.[type] ?? defaultIcons[type]; const action = t.data?.action; const cancel = t.data?.cancel; const useRichColors = richColors || t.data?.richColors; const colorStyles = useRichColors ? richColorStyles[type] : undefined; const iconColorStyle = !useRichColors ? iconColorStyles[type] : undefined; const showClose = t.data?.dismissible !== false && (closeButton || t.data?.closeButton); const copyErrorText = type === "error" && typeof t.description === "string" && !t.data?.hideCopyButton ? t.description : null; const stackedActionLayout = (action || cancel) && t.data?.actionLayout === "stacked-end"; const actionVariant = t.data?.actionVariant ?? "default"; const hasTrailingControls = Boolean(action) || Boolean(cancel); return ( getToastRootClassName({ colorStyles, position, state })} > {showClose ? ( ) : null} cn( "pointer-events-auto min-h-0 [overflow-x:clip] p-3.5 text-sm transition-opacity duration-[250ms]", state.behind && !state.expanded && "pointer-events-none opacity-0", state.expanded && "pointer-events-auto opacity-100", stackedActionLayout ? "flex flex-col gap-2.5" : "flex items-start gap-2.5", ) } >

{icon ? (

svg]:size-4", iconColorStyle)}>{icon}

) : null}

{hasTrailingControls ? (

{action ? ( {action.label} ) : null} {cancel ? ( {cancel.label} ) : null}

) : null} ); } function ToastList({ icons, closeButton, position, richColors, }: { icons: Partial>; closeButton: boolean; position: ToastPosition; richColors: boolean; }) { const { toasts } = ToastPrimitive.useToastManager(); return toasts.map((t) => ( )); } export interface ToasterProps { /** * Where toasts appear on screen. * @default "bottom-right" */ position?: ToastPosition; /** * Maximum number of visible toasts before older ones are removed. * @default 3 */ visibleToasts?: number; /** * Default auto-dismiss duration in milliseconds. * @default 4000 */ duration?: number; /** * Show a close button on every toast. * @default false */ closeButton?: boolean; /** * Use colorful backgrounds for typed toasts (success, error, etc.). * @default false */ richColors?: boolean; /** * Gap between toasts in pixels. * @default 14 */ gap?: number; /** * Distance from viewport edges in pixels. * @default 32 */ offset?: number; /** * Override default icons per toast type. */ icons?: Partial>; } function Toaster({ position = "bottom-right", visibleToasts = 3, duration = 4000, closeButton = false, richColors = false, gap = 14, offset = 32, icons = {}, }: ToasterProps) { const viewportStyle: ToastViewportStyle = { "--toast-offset": `${offset}px`, "--toast-gap": `${gap}px`, "--toast-peek": "10px", }; return ( ); } async function copyTextToClipboard(value: string) { if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(value); return; } const textArea = document.createElement("textarea"); textArea.value = value; textArea.setAttribute("readonly", ""); textArea.style.position = "fixed"; textArea.style.inset = "0 auto auto -9999px"; document.body.append(textArea); textArea.select(); const copied = document.execCommand("copy"); textArea.remove(); if (!copied) { throw new Error("Copy command was rejected."); } } export { Toaster }; ``` ## Usage ### App root setup Render one `Toaster` near your React app root, then call `toast` from any client component. ```tsx import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { Toaster } from "@/components/ui/toast"; import { App } from "./app"; import "./index.css"; createRoot(document.getElementById("root")!).render( , ); ``` ### Basic feedback Use basic typed toasts for routine product feedback. ```tsx import { toast } from "@/components/ui/toast"; export function SaveButton() { return ; } ``` ### Descriptions Add descriptions when the user needs context, not just confirmation. ```tsx toast.success("Deployment complete", { description: "Production is now serving build 1042.", }); toast.warning("Verification paused", { description: "A required secret is missing for the production smoke test.", }); ``` ### Actions Use actions for reversible operations or next steps. ```tsx toast.info("Invite copied", { action: { label: "Undo", onClick: () => { void restoreInvite(inviteId); }, }, }); ``` ### Promise states Use `toast.promise` when a toast should track an async operation from loading to final state. ```tsx await toast.promise(publishRelease(), { loading: { title: "Publishing release", description: "Uploading assets and warming the deployment.", }, success: (release) => ({ title: "Release published", description: `${release.version} is live in production.`, }), error: (error) => ({ title: "Publish failed", description: error instanceof Error ? error.message : "Try again from the releases page.", }), }); ``` ### Error details Error toasts with string descriptions include a copy-details button by default. Set `hideCopyButton` when copying the description is not useful. ```tsx toast.error("Upload failed", { description: "The source map upload hit a permissions error. Re-authenticate the CI token and retry.", closeButton: true, }); ``` ### Expandable details Use expandable content for diagnostics, checklists, or secondary detail that should not dominate the collapsed toast. ```tsx toast.warning("Verification paused", { description: "A required secret is missing for the production smoke test.", actionLayout: "stacked-end", actionVariant: "outline", action: { label: "Open checklist", onClick: () => openDeploymentChecklist(), }, expandableContent: (

`VERCEL_TOKEN` is not configured for this environment.
`POSTHOG_API_KEY` is missing from the deployment step.
Smoke tests were skipped after the build artifact upload.

), }); ``` ### Manual dismissal Use a longer-lived loading toast when work crosses screens, then dismiss it explicitly. ```tsx const toastId = toast.loading("Syncing workspace", { description: "This can take a few seconds.", duration: 30_000, }); try { await syncWorkspace(); toast.success("Workspace synced"); } finally { toast.dismiss(toastId); } ``` ### API Refer to the [Base UI documentation](https://base-ui.com/react/components/toast) for more details. --- URL: https://ui.jarv.is/components/video-player.md A themed media-chrome video player with composable controls. # Video Player A themed media-chrome video player with composable controls. ## Installation ```bash npx shadcn@latest add https://ui.jarv.is/r/video-player.json ``` [Registry JSON](https://ui.jarv.is/r/video-player.json) ## Preview ```tsx import { VideoPlayer, VideoPlayerContent, VideoPlayerControlBar, VideoPlayerMuteButton, VideoPlayerPlayButton, VideoPlayerSeekBackwardButton, VideoPlayerSeekForwardButton, VideoPlayerTimeDisplay, VideoPlayerTimeRange, VideoPlayerVolumeRange, } from "@/components/ui/video-player"; export function Preview() { return (

Sample video from MDN Web Docs.

); } ``` ## Source ### ui/video-player.tsx ```tsx "use client"; import { MediaControlBar, MediaController, MediaMuteButton, MediaPlayButton, MediaSeekBackwardButton, MediaSeekForwardButton, MediaTimeDisplay, MediaTimeRange, MediaVolumeRange, } from "media-chrome/react"; import type * as React from "react"; import { cn } from "@/lib/utils"; type VideoPlayerVariables = React.CSSProperties & Record<`--${string}`, string>; type VideoPlayerContentProps = React.ComponentProps<"video"> & { captionsSrc?: string; captionsLabel?: string; captionsSrcLang?: string; }; const videoPlayerVariables = { "--media-primary-color": "var(--primary)", "--media-secondary-color": "var(--background)", "--media-text-color": "var(--foreground)", "--media-background-color": "var(--background)", "--media-control-hover-background": "var(--accent)", "--media-font-family": "var(--font-sans)", "--media-live-button-icon-color": "var(--muted-foreground)", "--media-live-button-indicator-color": "var(--destructive)", "--media-range-track-background": "var(--border)", } satisfies VideoPlayerVariables; const emptyCaptionsSrc = "data:text/vtt,WEBVTT%0A%0A"; function VideoPlayer({ style, ...props }: React.ComponentProps) { return ; } function VideoPlayerControlBar(props: React.ComponentProps) { return ; } function VideoPlayerTimeRange({ className, ...props }: React.ComponentProps) { return ; } function VideoPlayerTimeDisplay({ className, ...props }: React.ComponentProps) { return ; } function VideoPlayerVolumeRange({ className, ...props }: React.ComponentProps) { return ; } function VideoPlayerPlayButton({ className, ...props }: React.ComponentProps) { return ; } function VideoPlayerSeekBackwardButton({ className, ...props }: React.ComponentProps) { return ( ); } function VideoPlayerSeekForwardButton({ className, ...props }: React.ComponentProps) { return ( ); } function VideoPlayerMuteButton({ className, ...props }: React.ComponentProps) { return ; } function VideoPlayerContent({ className, children, captionsSrc = emptyCaptionsSrc, captionsLabel = "Captions", captionsSrcLang = "en", ...props }: VideoPlayerContentProps) { return (

); } export { VideoPlayer, VideoPlayerControlBar, VideoPlayerTimeRange, VideoPlayerTimeDisplay, VideoPlayerVolumeRange, VideoPlayerPlayButton, VideoPlayerSeekBackwardButton, VideoPlayerSeekForwardButton, VideoPlayerMuteButton, VideoPlayerContent, }; ``` ## Usage ### Basic player Use the video player wrappers to compose a media-chrome player with your app theme tokens. ```tsx import { VideoPlayer, VideoPlayerContent, VideoPlayerControlBar } from "@/components/ui/video-player"; export function Example() { return ( ); } ``` ### Full controls Compose only the controls your player needs. The wrappers forward props to `media-chrome`. ```tsx import { VideoPlayer, VideoPlayerContent, VideoPlayerControlBar, VideoPlayerMuteButton, VideoPlayerPlayButton, VideoPlayerTimeDisplay, VideoPlayerTimeRange, VideoPlayerVolumeRange, } from "@/components/ui/video-player"; export function TrainingVideo() { return ( ); } ``` ### Captions Pass a captions track when the media has subtitles or transcripts. ```tsx import { VideoPlayer, VideoPlayerContent, VideoPlayerControlBar } from "@/components/ui/video-player"; export function CaptionedVideo() { return ( ); } ``` ### Theme overrides Override media-chrome CSS variables through `style` for one-off branded players. ```tsx import type { CSSProperties } from "react"; import { VideoPlayer, VideoPlayerContent, VideoPlayerControlBar } from "@/components/ui/video-player"; type VideoTheme = CSSProperties & Record<`--${string}`, string>; const playerTheme = { "--media-primary-color": "white", "--media-secondary-color": "black", "--media-control-hover-background": "rgb(255 255 255 / 0.16)", } satisfies VideoTheme; export function BrandedVideo() { return ( ); } ``` ### Seek controls Add skip controls for long-form content where users need quick navigation. ```tsx import { VideoPlayerControlBar, VideoPlayerSeekBackwardButton, VideoPlayerSeekForwardButton, } from "@/components/ui/video-player"; export function PlaybackControls() { return ( ); } ```