10b:I[144680,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$8f","$90","$7d","$8a","$80","$7e","$82","$8c","$91","$89","$92","$7f","$87","$88","$93","$94","$8d","$86","$95","$8b","$83","$81","$96","$97","$85"],"S"] 113:"ExplicitChatIdProvider" 114:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$8f","$90","$7d","$8a","$80","$7e","$82","$8c","$91","$89","$92","$7f","$87","$88","$93","$94","$8d","$86","$95","$8b","$83","$81","$96","$97","$85"],"$113"] 115:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$8f","$90","$7d","$8a","$80","$7e","$82","$8c","$91","$89","$92","$7f","$87","$88","$93","$94","$8d","$86","$95","$8b","$83","$81","$96","$97","$85"],"SWRDataProvider"] 117:[] 118:[["b_JbmfsDgxf0P",null],["b_qsoKTxgmsC9",null]] 119:[["b_JbmfsDgxf0P",{"templateVersionId":null,"templateCanonId":null}],["b_qsoKTxgmsC9",{"templateVersionId":null,"templateCanonId":null}]] 11a:[["b_JbmfsDgxf0P","$D2025-08-07T22:40:15.891Z"],["b_qsoKTxgmsC9","$D2025-08-07T22:47:37.808Z"]] 11b:[["b_JbmfsDgxf0P",false],["b_qsoKTxgmsC9",false]] 11c:[["b_JbmfsDgxf0P","$undefined"],["b_qsoKTxgmsC9",{"git":{"ref":"main","sha":"d5a2dffccb7910b46558520f76512d9b5627bc74","type":"github","repoId":0,"repoName":"v0-untitledui-starter-kit","ownerName":"deebov","commitMessage":"Add Untitled UI"}}]] 11d:[["b_JbmfsDgxf0P",null],["b_qsoKTxgmsC9",null]] 11e:[["b_JbmfsDgxf0P",true],["b_qsoKTxgmsC9",true]] 11f:[["b_JbmfsDgxf0P",true],["b_qsoKTxgmsC9",true]] 120:[] 121:Tf127a,[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.* .yarn/* !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/versions # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* # env files (can opt-in for committing if needed) .env # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Simple React app *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/dilshod-turobovs-projects/v0-simple-react-app) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/UvLs3jwtNhY) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/dilshod-turobovs-projects/v0-simple-react-app](https://vercel.com/dilshod-turobovs-projects/v0-simple-react-app)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/UvLs3jwtNhY](https://v0.dev/chat/projects/UvLs3jwtNhY)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/home-screen.tsx" "use client"; import { BookOpen01, Check, Copy01, Cube01, HelpCircle } from "@untitledui/icons"; import { Button } from "@/components/base/buttons/button"; import { ButtonUtility } from "@/components/base/buttons/button-utility"; import { UntitledLogoMinimal } from "@/components/foundations/logo/untitledui-logo-minimal"; import { useClipboard } from "@/hooks/use-clipboard"; export const HomeScreen = () => { const clipboard = useClipboard(); return (

Untitled UI Next.js starter kit

Get started by using existing components that came with this starter kit or add new ones:

npx untitledui@latest add

clipboard.copy("npx untitledui@latest add")} />

); }; [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata, Viewport } from "next"; import { Inter } from "next/font/google"; import { RouteProvider } from "@/providers/router-provider"; import { Theme } from "@/providers/theme"; import "@/styles/globals.css"; import { cx } from "@/utils/cx"; const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }); export const metadata: Metadata = { title: "Starter kit — Untitled UI", description: "Generated by Untitled UI CLI", }; export const viewport: Viewport = { themeColor: "#7f56d9", colorScheme: "light dark", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]typescriptreact:file="app/page.tsx" import { HomeScreen } from "./home-screen"; export default HomeScreen; [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/application/app-navigation/base-components/mobile-header.tsx" "use client"; import type { PropsWithChildren } from "react"; import { X as CloseIcon, Menu02 } from "@untitledui/icons"; import { Button as AriaButton, Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Modal as AriaModal, ModalOverlay as AriaModalOverlay, } from "react-aria-components"; import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo"; import { cx } from "@/utils/cx"; export const MobileNavigationHeader = ({ children }: PropsWithChildren) => { return (

cx( "fixed inset-0 z-50 cursor-pointer bg-overlay/70 pr-16 backdrop-blur-md lg:hidden", isEntering && "duration-300 ease-in-out animate-in fade-in", isExiting && "duration-200 ease-in-out animate-out fade-out", ) } > {({ state }) => ( <> state.close()} className="fixed top-3 right-2 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2" > {children} )} ); }; [V0_FILE]typescriptreact:file="components/application/app-navigation/base-components/nav-account-card.tsx" "use client"; import type { FC, HTMLAttributes } from "react"; import { useCallback, useEffect, useRef } from "react"; import type { Placement } from "@react-types/overlays"; import { BookOpen01, ChevronSelectorVertical, LogOut01, Plus, Settings01, User01 } from "@untitledui/icons"; import { useFocusManager } from "react-aria"; import type { DialogProps as AriaDialogProps } from "react-aria-components"; import { Button as AriaButton, Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover } from "react-aria-components"; import { AvatarLabelGroup } from "@/components/base/avatar/avatar-label-group"; import { Button } from "@/components/base/buttons/button"; import { RadioButtonBase } from "@/components/base/radio-buttons/radio-buttons"; import { useBreakpoint } from "@/hooks/use-breakpoint"; import { cx } from "@/utils/cx"; type NavAccountType = { /** Unique identifier for the nav item. */ id: string; /** Name of the account holder. */ name: string; /** Email address of the account holder. */ email: string; /** Avatar image URL. */ avatar: string; /** Online status of the account holder. This is used to display the online status indicator. */ status: "online" | "offline"; }; const placeholderAccounts: NavAccountType[] = [ { id: "olivia", name: "Olivia Rhye", email: "olivia@untitledui.com", avatar: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80", status: "online", }, { id: "sienna", name: "Sienna Hewitt", email: "sienna@untitledui.com", avatar: "https://www.untitledui.com/images/avatars/transparent/sienna-hewitt?bg=%23E0E0E0", status: "online", }, ]; export const NavAccountMenu = ({ className, selectedAccountId = "olivia", ...dialogProps }: AriaDialogProps & { className?: string; accounts?: NavAccountType[]; selectedAccountId?: string }) => { const focusManager = useFocusManager(); const dialogRef = useRef(null); const onKeyDown = useCallback( (e: KeyboardEvent) => { switch (e.key) { case "ArrowDown": focusManager?.focusNext({ tabbable: true, wrap: true }); break; case "ArrowUp": focusManager?.focusPrevious({ tabbable: true, wrap: true }); break; } }, [focusManager], ); useEffect(() => { const element = dialogRef.current; if (element) { element.addEventListener("keydown", onKeyDown); } return () => { if (element) { element.removeEventListener("keydown", onKeyDown); } }; }, [onKeyDown]); return (

Switch account

{placeholderAccounts.map((account) => ( ))}

); }; const NavAccountCardMenuItem = ({ icon: Icon, label, shortcut, ...buttonProps }: { icon?: FC<{ className?: string }>; label: string; shortcut?: string; } & HTMLAttributes) => { return ( ); }; export const NavAccountCard = ({ popoverPlacement, selectedAccountId = "olivia", items = placeholderAccounts, }: { popoverPlacement?: Placement; selectedAccountId?: string; items?: NavAccountType[]; }) => { const triggerRef = useRef(null); const isDesktop = useBreakpoint("lg"); const selectedAccount = placeholderAccounts.find((account) => account.id === selectedAccountId); if (!selectedAccount) { console.warn(`Account with ID ${selectedAccountId} not found in `); return null; } return (

cx( "will-change-transform", isEntering && "duration-150 ease-out animate-in fade-in placement-right:origin-left placement-right:slide-in-from-left-0.5 placement-top:origin-bottom placement-top:slide-in-from-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-in-from-top-0.5", isExiting && "duration-100 ease-in animate-out fade-out placement-right:origin-left placement-right:slide-out-to-left-0.5 placement-top:origin-bottom placement-top:slide-out-to-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-out-to-top-0.5", ) } >

); }; [V0_FILE]typescriptreact:file="components/application/app-navigation/base-components/nav-item-button.tsx" "use client"; import type { FC, MouseEventHandler } from "react"; import { Pressable } from "react-aria-components"; import { Tooltip } from "@/components/base/tooltip/tooltip"; import { cx } from "@/utils/cx"; const styles = { md: { root: "size-10", icon: "size-5", }, lg: { root: "size-12", icon: "size-6", }, }; interface NavItemButtonProps { /** Whether the collapsible nav item is open. */ open?: boolean; /** URL to navigate to when the button is clicked. */ href?: string; /** Label text for the button. */ label: string; /** Icon component to display. */ icon: FC<{ className?: string }>; /** Whether the button is currently active. */ current?: boolean; /** Size of the button. */ size?: "md" | "lg"; /** Handler for click events. */ onClick?: MouseEventHandler; /** Additional CSS classes to apply to the button. */ className?: string; /** Placement of the tooltip. */ tooltipPlacement?: "top" | "right" | "bottom" | "left"; } export const NavItemButton = ({ current: current, label, href, icon: Icon, size = "md", className, tooltipPlacement = "right", onClick, }: NavItemButtonProps) => { return ( ); }; [V0_FILE]typescriptreact:file="components/application/app-navigation/base-components/nav-item.tsx" "use client"; import type { FC, HTMLAttributes, MouseEventHandler, ReactNode } from "react"; import { ChevronDown, Share04 } from "@untitledui/icons"; import { Link as AriaLink } from "react-aria-components"; import { Badge } from "@/components/base/badges/badges"; import { cx, sortCx } from "@/utils/cx"; const styles = sortCx({ root: "group relative flex w-full cursor-pointer items-center rounded-md bg-primary outline-focus-ring transition duration-100 ease-linear select-none hover:bg-primary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2", rootSelected: "bg-active hover:bg-secondary_hover", }); interface NavItemBaseProps { /** Whether the nav item shows only an icon. */ iconOnly?: boolean; /** Whether the collapsible nav item is open. */ open?: boolean; /** URL to navigate to when the nav item is clicked. */ href?: string; /** Type of the nav item. */ type: "link" | "collapsible" | "collapsible-child"; /** Icon component to display. */ icon?: FC>; /** Badge to display. */ badge?: ReactNode; /** Whether the nav item is currently active. */ current?: boolean; /** Whether to truncate the label text. */ truncate?: boolean; /** Handler for click events. */ onClick?: MouseEventHandler; /** Content to display. */ children?: ReactNode; } export const NavItemBase = ({ current, type, badge, href, icon: Icon, children, truncate = true, onClick }: NavItemBaseProps) => { const iconElement = Icon && ; const badgeElement = badge && (typeof badge === "string" || typeof badge === "number") ? ( {badge} ) : ( badge ); const labelElement = ( {children} ); const isExternal = href && href.startsWith("http"); const externalIcon = isExternal && ; if (type === "collapsible") { return (

{iconElement} {labelElement} {badgeElement}

); } if (type === "collapsible-child") { return ( {labelElement} {externalIcon} {badgeElement} ); } return ( {iconElement} {labelElement} {externalIcon} {badgeElement} ); }; [V0_FILE]typescriptreact:file="components/application/app-navigation/base-components/nav-list.tsx" "use client"; import { useState } from "react"; import { cx } from "@/utils/cx"; import type { NavItemDividerType, NavItemType } from "../config"; import { NavItemBase } from "./nav-item"; interface NavListProps { /** URL of the currently active item. */ activeUrl?: string; /** Additional CSS classes to apply to the list. */ className?: string; /** List of items to display. */ items: (NavItemType | NavItemDividerType)[]; } export const NavList = ({ activeUrl, items, className }: NavListProps) => { const [open, setOpen] = useState(false); const activeItem = items.find((item) => item.href === activeUrl || item.items?.some((subItem) => subItem.href === activeUrl)); const [currentItem, setCurrentItem] = useState(activeItem); return (

{ setOpen(e.currentTarget.open); setCurrentItem(item); }} > {item.label}

{childItem.label}

{item.label}

); }; [V0_FILE]typescript:file="components/application/app-navigation/config.ts" import type { FC, ReactNode } from "react"; export type NavItemType = { /** Label text for the nav item. */ label: string; /** URL to navigate to when the nav item is clicked. */ href?: string; /** Icon component to display. */ icon?: FC<{ className?: string }>; /** Badge to display. */ badge?: ReactNode; /** List of sub-items to display. */ items?: { label: string; href: string; icon?: FC<{ className?: string }>; badge?: ReactNode }[]; /** Whether this nav item is a divider. */ divider?: boolean; }; export type NavItemDividerType = Omit & { /** Label text for the divider. */ label?: string; /** Whether this nav item is a divider. */ divider: true; }; [V0_FILE]typescriptreact:file="components/application/app-navigation/header-navigation.tsx" "use client"; import type { FC, ReactNode } from "react"; import { Bell01, LifeBuoy01, SearchLg, Settings01 } from "@untitledui/icons"; import { Button as AriaButton, DialogTrigger, Popover } from "react-aria-components"; import { Avatar } from "@/components/base/avatar/avatar"; import { BadgeWithDot } from "@/components/base/badges/badges"; import { Input } from "@/components/base/input/input"; import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo"; import { cx } from "@/utils/cx"; import { MobileNavigationHeader } from "./base-components/mobile-header"; import { NavAccountCard, NavAccountMenu } from "./base-components/nav-account-card"; import { NavItemBase } from "./base-components/nav-item"; import { NavItemButton } from "./base-components/nav-item-button"; import { NavList } from "./base-components/nav-list"; type NavItem = { /** Label text for the nav item. */ label: string; /** URL to navigate to when the nav item is clicked. */ href: string; /** Whether the nav item is currently active. */ current?: boolean; /** Icon component to display. */ icon?: FC<{ className?: string }>; /** Badge to display. */ badge?: ReactNode; /** List of sub-items to display. */ items?: NavItem[]; }; interface HeaderNavigationBaseProps { /** URL of the currently active item. */ activeUrl?: string; /** List of items to display. */ items: NavItem[]; /** List of sub-items to display. */ subItems?: NavItem[]; /** Content to display in the trailing position. */ trailingContent?: ReactNode; /** Whether to show the avatar dropdown. */ showAvatarDropdown?: boolean; /** Whether to hide the bottom border. */ hideBorder?: boolean; } export const HeaderNavigationBase = ({ activeUrl, items, subItems, trailingContent, showAvatarDropdown = true, hideBorder = false, }: HeaderNavigationBaseProps) => { const activeSubNavItems = subItems || items.find((item) => item.current && item.items && item.items.length > 0)?.items; const showSecondaryNav = activeSubNavItems && activeSubNavItems.length > 0; return ( <>

{trailingContent}

{showAvatarDropdown && ( cx( "group relative inline-flex cursor-pointer", (isPressed || isFocused) && "rounded-full outline-2 outline-offset-2 outline-focus-ring", ) } > cx( "will-change-transform", isEntering && "duration-300 ease-out animate-in fade-in placement-right:slide-in-from-left-2 placement-top:slide-in-from-bottom-2 placement-bottom:slide-in-from-top-2", isExiting && "duration-150 ease-in animate-out fade-out placement-right:slide-out-to-left-2 placement-top:slide-out-to-bottom-2 placement-bottom:slide-out-to-top-2", ) } > )}

{showSecondaryNav && (

)}

); }; [V0_FILE]typescriptreact:file="components/application/app-navigation/sidebar-navigation-base.tsx" export { MobileNavigationHeader } from "./base-components/mobile-header"; export { NavAccountCard } from "./base-components/nav-account-card"; export { NavItemButton } from "./base-components/nav-item-button"; export { NavItemBase } from "./base-components/nav-item"; export { NavList } from "./base-components/nav-list"; [V0_FILE]typescriptreact:file="components/application/app-navigation/sidebar-navigation/sidebar-dual-tier.tsx" "use client"; import type { ReactNode } from "react"; import { useState } from "react"; import { SearchLg } from "@untitledui/icons"; import { AnimatePresence, motion } from "motion/react"; import { Input } from "@/components/base/input/input"; import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo"; import { cx } from "@/utils/cx"; import { MobileNavigationHeader } from "../base-components/mobile-header"; import { NavAccountCard } from "../base-components/nav-account-card"; import { NavItemBase } from "../base-components/nav-item"; import { NavList } from "../base-components/nav-list"; import type { NavItemType } from "../config"; interface SidebarNavigationDualTierProps { /** URL of the currently active item. */ activeUrl?: string; /** Feature card to display. */ featureCard?: ReactNode; /** List of items to display. */ items: NavItemType[]; /** List of footer items to display. */ footerItems?: NavItemType[]; /** Whether to hide the right side border. */ hideBorder?: boolean; } export const SidebarNavigationDualTier = ({ activeUrl, hideBorder, items, footerItems = [], featureCard }: SidebarNavigationDualTierProps) => { const activeItem = [...items, ...footerItems].find((item) => item.href === activeUrl || item.items?.some((subItem) => subItem.href === activeUrl)); const [currentItem, setCurrentItem] = useState(activeItem || items[1]); const [isHovering, setIsHovering] = useState(false); const isSecondarySidebarVisible = isHovering && Boolean(currentItem.items?.length); const MAIN_SIDEBAR_WIDTH = 296; const SECONDARY_SIDEBAR_WIDTH = 256; const mainSidebar = (

setCurrentItem(item)} > {item.label}

{footerItems.length > 0 && (

setCurrentItem(item)} > {item.label}

)} {featureCard}

); const secondarySidebar = ( {isSecondarySidebarVisible && (

{item.label}

)} ); return ( <> {/* Mobile header navigation */} {mainSidebar} {/* Desktop sidebar navigation */}

setIsHovering(true)} onPointerLeave={() => setIsHovering(false)} > {mainSidebar} {secondarySidebar}

{/* Placeholder to take up physical space because the real sidebar has `fixed` position. */}

); }; [V0_FILE]typescriptreact:file="components/application/app-navigation/sidebar-navigation/sidebar-section-dividers.tsx" "use client"; import { SearchLg } from "@untitledui/icons"; import { Input } from "@/components/base/input/input"; import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo"; import { MobileNavigationHeader } from "../base-components/mobile-header"; import { NavAccountCard } from "../base-components/nav-account-card"; import { NavList } from "../base-components/nav-list"; import type { NavItemDividerType, NavItemType } from "../config"; interface SidebarNavigationSectionDividersProps { /** URL of the currently active item. */ activeUrl?: string; /** List of items to display. */ items: (NavItemType | NavItemDividerType)[]; } export const SidebarNavigationSectionDividers = ({ activeUrl, items }: SidebarNavigationSectionDividersProps) => { const MAIN_SIDEBAR_WIDTH = 292; const content = ( ); return ( <> {/* Mobile header navigation */} {content} {/* Desktop sidebar navigation */}

{content}

{/* Placeholder to take up physical space because the real sidebar has `fixed` position. */}

); }; [V0_FILE]typescriptreact:file="components/application/app-navigation/sidebar-navigation/sidebar-sections-subheadings.tsx" "use client"; import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo"; import { MobileNavigationHeader } from "../base-components/mobile-header"; import { NavAccountCard } from "../base-components/nav-account-card"; import { NavItemBase } from "../base-components/nav-item"; import type { NavItemType } from "../config"; interface SidebarNavigationSectionsSubheadingsProps { /** URL of the currently active item. */ activeUrl?: string; /** List of items to display. */ items: Array<{ label: string; items: NavItemType[] }>; } export const SidebarNavigationSectionsSubheadings = ({ activeUrl = "/", items }: SidebarNavigationSectionsSubheadingsProps) => { const MAIN_SIDEBAR_WIDTH = 292; const content = ( ); return ( <> {/* Mobile header navigation */} {content} {/* Desktop sidebar navigation */}

{content}

{/* Placeholder to take up physical space because the real sidebar has `fixed` position. */}

); }; [V0_FILE]typescriptreact:file="components/application/app-navigation/sidebar-navigation/sidebar-simple.tsx" "use client"; import type { ReactNode } from "react"; import { SearchLg } from "@untitledui/icons"; import { Input } from "@/components/base/input/input"; import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo"; import { cx } from "@/utils/cx"; import { MobileNavigationHeader } from "../base-components/mobile-header"; import { NavAccountCard } from "../base-components/nav-account-card"; import { NavItemBase } from "../base-components/nav-item"; import { NavList } from "../base-components/nav-list"; import type { NavItemType } from "../config"; interface SidebarNavigationProps { /** URL of the currently active item. */ activeUrl?: string; /** List of items to display. */ items: NavItemType[]; /** List of footer items to display. */ footerItems?: NavItemType[]; /** Feature card to display. */ featureCard?: ReactNode; /** Whether to show the account card. */ showAccountCard?: boolean; /** Whether to hide the right side border. */ hideBorder?: boolean; /** Additional CSS classes to apply to the sidebar. */ className?: string; } export const SidebarNavigationSimple = ({ activeUrl, items, footerItems = [], featureCard, showAccountCard = true, hideBorder = false, className, }: SidebarNavigationProps) => { const MAIN_SIDEBAR_WIDTH = 296; const content = ( ); return ( <> {/* Mobile header navigation */} {content} {/* Desktop sidebar navigation */}

{content}

{/* Placeholder to take up physical space because the real sidebar has `fixed` position. */}

); }; [V0_FILE]typescriptreact:file="components/application/app-navigation/sidebar-navigation/sidebar-slim.tsx" "use client"; import type { FC } from "react"; import { useState } from "react"; import { LifeBuoy01, LogOut01, Settings01 } from "@untitledui/icons"; import { AnimatePresence, motion } from "motion/react"; import { Button as AriaButton, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover } from "react-aria-components"; import { Avatar } from "@/components/base/avatar/avatar"; import { AvatarLabelGroup } from "@/components/base/avatar/avatar-label-group"; import { Button } from "@/components/base/buttons/button"; import { ButtonUtility } from "@/components/base/buttons/button-utility"; import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo"; import { UntitledLogoMinimal } from "@/components/foundations/logo/untitledui-logo-minimal"; import { cx } from "@/utils/cx"; import { MobileNavigationHeader } from "../base-components/mobile-header"; import { NavAccountMenu } from "../base-components/nav-account-card"; import { NavItemBase } from "../base-components/nav-item"; import { NavItemButton } from "../base-components/nav-item-button"; import { NavList } from "../base-components/nav-list"; import type { NavItemType } from "../config"; interface SidebarNavigationSlimProps { /** URL of the currently active item. */ activeUrl?: string; /** List of items to display. */ items: (NavItemType & { icon: FC<{ className?: string }> })[]; /** List of footer items to display. */ footerItems?: (NavItemType & { icon: FC<{ className?: string }> })[]; /** Whether to hide the border. */ hideBorder?: boolean; /** Whether to hide the right side border. */ hideRightBorder?: boolean; } export const SidebarNavigationSlim = ({ activeUrl, items, footerItems = [], hideBorder, hideRightBorder }: SidebarNavigationSlimProps) => { const activeItem = [...items, ...footerItems].find((item) => item.href === activeUrl || item.items?.some((subItem) => subItem.href === activeUrl)); const [currentItem, setCurrentItem] = useState(activeItem || items[1]); const [isHovering, setIsHovering] = useState(false); const isSecondarySidebarVisible = isHovering && Boolean(currentItem.items?.length); const MAIN_SIDEBAR_WIDTH = 68; const SECONDARY_SIDEBAR_WIDTH = 268; const mainSidebar = (

setCurrentItem(item)} />

{footerItems.length > 0 && (

setCurrentItem(item)} />

)} cx("group relative inline-flex rounded-full", (isPressed || isFocused) && "outline-2 outline-offset-2 outline-focus-ring") } > cx( "will-change-transform", isEntering && "duration-300 ease-out animate-in fade-in placement-right:slide-in-from-left-2 placement-top:slide-in-from-bottom-2 placement-bottom:slide-in-from-top-2", isExiting && "duration-150 ease-in animate-out fade-out placement-right:slide-out-to-left-2 placement-top:slide-out-to-bottom-2 placement-bottom:slide-out-to-top-2", ) } >

); const secondarySidebar = ( {isSecondarySidebarVisible && (

{currentItem.label}

{item.label}

Olivia Rhye

olivia@untitledui.com

)} ); return ( <> {/* Desktop sidebar navigation */}

setIsHovering(true)} onPointerLeave={() => setIsHovering(false)} > {mainSidebar} {secondarySidebar}

{/* Placeholder to take up physical space because the real sidebar has `fixed` position. */}

{/* Mobile header navigation */} ); }; [V0_FILE]typescriptreact:file="components/application/date-picker/calendar.tsx" "use client"; import type { HTMLAttributes, PropsWithChildren } from "react"; import { Fragment, useContext, useState } from "react"; import { type CalendarDate, getLocalTimeZone, today } from "@internationalized/date"; import { ChevronLeft, ChevronRight } from "@untitledui/icons"; import type { CalendarProps as AriaCalendarProps, DateValue } from "react-aria-components"; import { Calendar as AriaCalendar, CalendarContext as AriaCalendarContext, CalendarGrid as AriaCalendarGrid, CalendarGridBody as AriaCalendarGridBody, CalendarGridHeader as AriaCalendarGridHeader, CalendarHeaderCell as AriaCalendarHeaderCell, CalendarStateContext as AriaCalendarStateContext, Heading as AriaHeading, useSlottedContext, } from "react-aria-components"; import { Button } from "@/components/base/buttons/button"; import { cx } from "@/utils/cx"; import { CalendarCell } from "./cell"; import { DateInput } from "./date-input"; export const CalendarContextProvider = ({ children }: PropsWithChildren) => { const [value, onChange] = useState(null); const [focusedValue, onFocusChange] = useState(); return {children}; }; const PresetButton = ({ value, children, ...props }: HTMLAttributes & { value: CalendarDate }) => { const context = useContext(AriaCalendarStateContext); if (!context) { throw new Error("Preset must be used within a Calendar component"); } const handleClick = () => { context.setValue(value); context.setFocusedDate(value); }; return ( ); }; interface CalendarProps extends AriaCalendarProps { /** The dates to highlight. */ highlightedDates?: DateValue[]; } export const Calendar = ({ highlightedDates, className, ...props }: CalendarProps) => { const context = useSlottedContext(AriaCalendarContext)!; const ContextWrapper = context ? Fragment : CalendarContextProvider; return ( cx("flex flex-col gap-3", typeof className === "function" ? className(state) : className)}>

Today

{(day) => (

{day.slice(0, 2)}

)} {(date) => ( date.compare(highlightedDate) === 0)} /> )} ); }; [V0_FILE]typescriptreact:file="components/application/date-picker/cell.tsx" "use client"; import { getDayOfWeek, getLocalTimeZone, isToday } from "@internationalized/date"; import type { CalendarCellProps as AriaCalendarCellProps } from "react-aria-components"; import { CalendarCell as AriaCalendarCell, RangeCalendarContext, useLocale, useSlottedContext } from "react-aria-components"; import { cx } from "@/utils/cx"; interface CalendarCellProps extends AriaCalendarCellProps { /** Whether the calendar is a range calendar. */ isRangeCalendar?: boolean; /** Whether the cell is highlighted. */ isHighlighted?: boolean; } export const CalendarCell = ({ date, isHighlighted, ...props }: CalendarCellProps) => { const { locale } = useLocale(); const dayOfWeek = getDayOfWeek(date, locale); const rangeCalendarContext = useSlottedContext(RangeCalendarContext); const isRangeCalendar = !!rangeCalendarContext; const start = rangeCalendarContext?.value?.start; const end = rangeCalendarContext?.value?.end; const isAfterStart = start ? date.compare(start) > 0 : true; const isBeforeEnd = end ? date.compare(end) < 0 : true; const isAfterOrOnStart = start && date.compare(start) >= 0; const isBeforeOrOnEnd = end && date.compare(end) <= 0; const isInRange = isAfterOrOnStart && isBeforeOrOnEnd; const lastDayOfMonth = new Date(date.year, date.month, 0).getDate(); const isLastDayOfMonth = date.day === lastDayOfMonth; const isFirstDayOfMonth = date.day === 1; const isTodayDate = isToday(date, getLocalTimeZone()); return ( { const isRoundedLeft = isSelectionStart || dayOfWeek === 0; const isRoundedRight = isSelectionEnd || dayOfWeek === 6; return cx( "relative size-10 focus:outline-none", isRoundedLeft && "rounded-l-full", isRoundedRight && "rounded-r-full", isInRange && isDisabled && "bg-active", isSelected && isRangeCalendar && "bg-active", isDisabled ? "pointer-events-none" : "cursor-pointer", isFocusVisible ? "z-10" : "z-0", isRangeCalendar && isOutsideMonth && "hidden", // Show gradient on last day of month if it's within the selected range. isLastDayOfMonth && isSelected && isBeforeEnd && isRangeCalendar && "after:absolute after:inset-0 after:translate-x-full after:bg-gradient-to-l after:from-transparent after:to-bg-active in-[[role=gridcell]:last-child]:after:hidden", // Show gradient on first day of month if it's within the selected range. isFirstDayOfMonth && isSelected && isAfterStart && isRangeCalendar && "after:absolute after:inset-0 after:-translate-x-full after:bg-gradient-to-r after:from-transparent after:to-bg-active in-[[role=gridcell]:first-child]:after:hidden", ); }} > {({ isDisabled, isFocusVisible, isSelectionStart, isSelectionEnd, isSelected, formattedDate }) => { const markedAsSelected = isSelectionStart || isSelectionEnd || (isSelected && !isDisabled && !isRangeCalendar); return (

{formattedDate} {(isHighlighted || isTodayDate) && (

)}

); }} ); }; [V0_FILE]typescriptreact:file="components/application/date-picker/date-input.tsx" "use client"; import type { DateInputProps as AriaDateInputProps } from "react-aria-components"; import { DateInput as AriaDateInput, DateSegment as AriaDateSegment } from "react-aria-components"; import { cx } from "@/utils/cx"; interface DateInputProps extends Omit {} export const DateInput = (props: DateInputProps) => { return ( {(segment) => ( )} ); }; [V0_FILE]typescriptreact:file="components/application/date-picker/date-picker.tsx" "use client"; import { getLocalTimeZone, today } from "@internationalized/date"; import { useControlledState } from "@react-stately/utils"; import { Calendar as CalendarIcon } from "@untitledui/icons"; import { useDateFormatter } from "react-aria"; import type { DatePickerProps as AriaDatePickerProps, DateValue } from "react-aria-components"; import { DatePicker as AriaDatePicker, Dialog as AriaDialog, Group as AriaGroup, Popover as AriaPopover } from "react-aria-components"; import { Button } from "@/components/base/buttons/button"; import { cx } from "@/utils/cx"; import { Calendar } from "./calendar"; const highlightedDates = [today(getLocalTimeZone())]; interface DatePickerProps extends AriaDatePickerProps { /** The function to call when the apply button is clicked. */ onApply?: () => void; /** The function to call when the cancel button is clicked. */ onCancel?: () => void; } export const DatePicker = ({ value: valueProp, defaultValue, onChange, onApply, onCancel, ...props }: DatePickerProps) => { const formatter = useDateFormatter({ month: "short", day: "numeric", year: "numeric", }); const [value, setValue] = useControlledState(valueProp, defaultValue || null, onChange); const formattedDate = value ? formatter.format(value.toDate(getLocalTimeZone())) : "Select date"; return ( cx( "will-change-transform", isEntering && "duration-150 ease-out animate-in fade-in placement-right:origin-left placement-right:slide-in-from-left-0.5 placement-top:origin-bottom placement-top:slide-in-from-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-in-from-top-0.5", isExiting && "duration-100 ease-in animate-out fade-out placement-right:origin-left placement-right:slide-out-to-left-0.5 placement-top:origin-bottom placement-top:slide-out-to-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-out-to-top-0.5", ) } > {({ close }) => ( <>

)} ); }; [V0_FILE]typescriptreact:file="components/application/date-picker/date-range-picker.tsx" "use client"; import { useMemo, useState } from "react"; import { endOfMonth, endOfWeek, getLocalTimeZone, startOfMonth, startOfWeek, today } from "@internationalized/date"; import { useControlledState } from "@react-stately/utils"; import { Calendar as CalendarIcon } from "@untitledui/icons"; import { useDateFormatter } from "react-aria"; import type { DateRangePickerProps as AriaDateRangePickerProps, DateValue } from "react-aria-components"; import { DateRangePicker as AriaDateRangePicker, Dialog as AriaDialog, Group as AriaGroup, Popover as AriaPopover, useLocale } from "react-aria-components"; import { Button } from "@/components/base/buttons/button"; import { cx } from "@/utils/cx"; import { DateInput } from "./date-input"; import { RangeCalendar } from "./range-calendar"; import { RangePresetButton } from "./range-preset"; const now = today(getLocalTimeZone()); const highlightedDates = [today(getLocalTimeZone())]; interface DateRangePickerProps extends AriaDateRangePickerProps { /** The function to call when the apply button is clicked. */ onApply?: () => void; /** The function to call when the cancel button is clicked. */ onCancel?: () => void; } export const DateRangePicker = ({ value: valueProp, defaultValue, onChange, onApply, onCancel, ...props }: DateRangePickerProps) => { const { locale } = useLocale(); const formatter = useDateFormatter({ month: "short", day: "numeric", year: "numeric", }); const [value, setValue] = useControlledState(valueProp, defaultValue || null, onChange); const [focusedValue, setFocusedValue] = useState(null); const formattedStartDate = value?.start ? formatter.format(value.start.toDate(getLocalTimeZone())) : "Select date"; const formattedEndDate = value?.end ? formatter.format(value.end.toDate(getLocalTimeZone())) : "Select date"; const presets = useMemo( () => ({ today: { label: "Today", value: { start: now, end: now } }, yesterday: { label: "Yesterday", value: { start: now.subtract({ days: 1 }), end: now.subtract({ days: 1 }) } }, thisWeek: { label: "This week", value: { start: startOfWeek(now, locale), end: endOfWeek(now, locale) } }, lastWeek: { label: "Last week", value: { start: startOfWeek(now, locale).subtract({ weeks: 1 }), end: endOfWeek(now, locale).subtract({ weeks: 1 }), }, }, thisMonth: { label: "This month", value: { start: startOfMonth(now), end: endOfMonth(now) } }, lastMonth: { label: "Last month", value: { start: startOfMonth(now).subtract({ months: 1 }), end: endOfMonth(now).subtract({ months: 1 }), }, }, thisYear: { label: "This year", value: { start: startOfMonth(now.set({ month: 1 })), end: endOfMonth(now.set({ month: 12 })) } }, lastYear: { label: "Last year", value: { start: startOfMonth(now.set({ month: 1 }).subtract({ years: 1 })), end: endOfMonth(now.set({ month: 12 }).subtract({ years: 1 })), }, }, allTime: { label: "All time", value: { start: now.set({ year: 2000, month: 1, day: 1 }), end: now, }, }, }), [locale], ); return ( cx( "will-change-transform", isEntering && "duration-150 ease-out animate-in fade-in placement-right:origin-left placement-right:slide-in-from-left-0.5 placement-top:origin-bottom placement-top:slide-in-from-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-in-from-top-0.5", isExiting && "duration-100 ease-in animate-out fade-out placement-right:origin-left placement-right:slide-out-to-left-0.5 placement-top:origin-bottom placement-top:slide-out-to-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-out-to-top-0.5", ) } > {({ close }) => ( <>

{Object.values(presets).map((preset) => ( { setValue(preset.value); setFocusedValue(preset.value.start); }} > {preset.label} ))}

–

)} ); }; [V0_FILE]typescriptreact:file="components/application/date-picker/range-calendar.tsx" "use client"; import type { HTMLAttributes, PropsWithChildren } from "react"; import { Fragment, useContext, useState } from "react"; import type { CalendarDate } from "@internationalized/date"; import { ChevronLeft, ChevronRight } from "@untitledui/icons"; import { useDateFormatter } from "react-aria"; import type { RangeCalendarProps as AriaRangeCalendarProps, DateValue } from "react-aria-components"; import { CalendarGrid as AriaCalendarGrid, CalendarGridBody as AriaCalendarGridBody, CalendarGridHeader as AriaCalendarGridHeader, CalendarHeaderCell as AriaCalendarHeaderCell, RangeCalendar as AriaRangeCalendar, RangeCalendarContext, RangeCalendarStateContext, useSlottedContext, } from "react-aria-components"; import { Button } from "@/components/base/buttons/button"; import { useBreakpoint } from "@/hooks/use-breakpoint"; import { CalendarCell } from "./cell"; import { DateInput } from "./date-input"; export const RangeCalendarContextProvider = ({ children }: PropsWithChildren) => { const [value, onChange] = useState<{ start: DateValue; end: DateValue } | null>(null); const [focusedValue, onFocusChange] = useState(); return {children}; }; const RangeCalendarTitle = ({ part }: { part: "start" | "end" }) => { const context = useContext(RangeCalendarStateContext); if (!context) { throw new Error(" must be used within a component."); } const formatter = useDateFormatter({ month: "long", year: "numeric", calendar: context.visibleRange.start.calendar.identifier, timeZone: context.timeZone, }); return part === "start" ? formatter.format(context.visibleRange.start.toDate(context.timeZone)) : formatter.format(context.visibleRange.end.toDate(context.timeZone)); }; const MobilePresetButton = ({ value, children, ...props }: HTMLAttributes & { value: { start: DateValue; end: DateValue } }) => { const context = useContext(RangeCalendarStateContext); return ( ); }; interface RangeCalendarProps extends AriaRangeCalendarProps { /** The dates to highlight. */ highlightedDates?: DateValue[]; /** The date presets to display. */ presets?: Record; } export const RangeCalendar = ({ presets, ...props }: RangeCalendarProps) => { const isDesktop = useBreakpoint("md"); const context = useSlottedContext(RangeCalendarContext); const ContextWrapper = context ? Fragment : RangeCalendarContextProvider; return (

{!isDesktop && (

–

)} {!isDesktop && presets && (

{Object.values(presets).map((preset) => ( {preset.label} ))}

)} {(day) => (

{day.slice(0, 2)}

)} {(date) => }

{isDesktop && (

{(day) => (

{day.slice(0, 2)}

)} {(date) => }

)} ); }; [V0_FILE]typescriptreact:file="components/application/date-picker/range-preset.tsx" "use client"; import { type HTMLAttributes } from "react"; import { type DateValue, RangeCalendarContext, useSlottedContext } from "react-aria-components"; import { cx } from "@/utils/cx"; interface RangePresetButtonProps extends HTMLAttributes { value: { start: DateValue; end: DateValue }; } export const RangePresetButton = ({ value, className, children, ...props }: RangePresetButtonProps) => { const context = useSlottedContext(RangeCalendarContext); const isSelected = context?.value?.start?.compare(value.start) === 0 && context?.value?.end?.compare(value.end) === 0; return ( ); }; [V0_FILE]typescriptreact:file="components/application/empty-state/empty-state.tsx" "use client"; import type { ComponentProps, ComponentPropsWithRef } from "react"; import { Children, createContext, isValidElement, useContext } from "react"; import { FileIcon } from "@untitledui/file-icons"; import { SearchLg } from "@untitledui/icons"; import { FeaturedIcon as FeaturedIconbase } from "@/components/foundations/featured-icon/featured-icons"; import type { BackgroundPatternProps } from "@/components/shared-assets/background-patterns"; import { BackgroundPattern } from "@/components/shared-assets/background-patterns"; import { Illustration as Illustrations } from "@/components/shared-assets/illustrations"; import { cx } from "@/utils/cx"; interface RootContextProps { size?: "sm" | "md" | "lg"; } const RootContext = createContext({ size: "lg" }); interface RootProps extends ComponentPropsWithRef<"div">, RootContextProps {} const Root = ({ size = "lg", ...props }: RootProps) => { return (

); }; const FeaturedIcon = ({ color = "gray", theme = "modern", icon = SearchLg, size = "lg", ...props }: ComponentPropsWithRef) => { const { size: rootSize } = useContext(RootContext); return ; }; const Illustration = ({ type = "cloud", color = "gray", size = "lg", ...props }: ComponentPropsWithRef) => { const { size: rootSize } = useContext(RootContext); return ( ); }; interface FileTypeIconProps extends ComponentPropsWithRef<"div"> { type?: ComponentProps["type"]; theme?: ComponentProps["variant"]; } const FileTypeIcon = ({ type = "folder", theme = "solid", ...props }: FileTypeIconProps) => { return (

); }; interface HeaderProps extends ComponentPropsWithRef<"div"> { pattern?: "none" | BackgroundPatternProps["pattern"]; patternSize?: "sm" | "md" | "lg"; } const Header = ({ pattern = "circle", patternSize = "md", ...props }: HeaderProps) => { const { size } = useContext(RootContext); // Whether we are passing `Illustration` component as children. const hasIllustration = Children.toArray(props.children).some((headerChild) => isValidElement(headerChild) && headerChild.type === Illustration); return (

{pattern !== "none" && ( )} {props.children}

); }; const Content = (props: ComponentPropsWithRef<"div">) => { const { size } = useContext(RootContext); return (

); }; const Footer = (props: ComponentPropsWithRef<"div">) => { return