useDocumentTitle

Dynamic document title management for React applications. Perfect for Next.js projects requiring browser tab updates with TypeScript support and seamless integration.

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Installation

npx shadcn@latest add https://www.shadcn.io/registry/use-document-title.json

npx shadcn@latest add https://www.shadcn.io/registry/use-document-title.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-document-title.json

bunx shadcn@latest add https://www.shadcn.io/registry/use-document-title.json

Features

Real-time title updates with automatic DOM synchronization using React useEffect
TypeScript support with complete interface definitions and IntelliSense
Lightweight implementation with zero external dependencies beyond React
SSR compatibility designed for Next.js server-side rendering environments
Memory efficient with automatic cleanup and dependency optimization
shadcn/ui integration compatible with existing design system components

Examples

Dynamic App State

Loading component...

"use client";import * as React from "react";import { Button } from "@/components/ui/button";import { Badge } from "@/components/ui/badge";import { Label } from "@/components/ui/label";import { useDocumentTitle } from "@/components/ui/shadcn-io/use-document-title";export default function UseDocumentTitleAdvancedDemo() {  const [unread, setUnread] = React.useState(0);  const [status, setStatus] = React.useState<'online' | 'away' | 'busy'>('online');  const [activeTab, setActiveTab] = React.useState('Dashboard');  // Dynamic title based on app state  const documentTitle = React.useMemo(() => {    const unreadPrefix = unread > 0 ? `(${unread}) ` : '';    const statusIcon = { online: '🟢', away: '🟡', busy: '🔴' }[status];    return `${unreadPrefix}${statusIcon} ${activeTab} - shadcn.io`;  }, [unread, status, activeTab]);  useDocumentTitle(documentTitle);  return (    <div className="space-y-4 p-4 max-w-sm mx-auto">      {/* Notifications */}      <div className="space-y-2">        <div className="flex items-center justify-between">          <Label className="text-sm font-medium">Notifications</Label>          <Badge variant={unread > 0 ? "destructive" : "secondary"} className="text-xs">            {unread} unread          </Badge>        </div>        <div className="flex gap-2">          <Button size="sm" onClick={() => setUnread(prev => prev + 1)}>            Add (+1)          </Button>          <Button             size="sm"             variant="outline"             onClick={() => setUnread(0)}            disabled={unread === 0}          >            Clear          </Button>        </div>      </div>      {/* Status */}      <div className="space-y-2">        <Label className="text-sm font-medium">Status</Label>        <div className="grid grid-cols-3 gap-2">          {(['online', 'away', 'busy'] as const).map((s) => (            <Button              key={s}              size="sm"              variant={status === s ? "default" : "outline"}              onClick={() => setStatus(s)}              className="text-xs"            >              {s === 'online' && '🟢'}              {s === 'away' && '🟡'}              {s === 'busy' && '🔴'}              <span className="ml-1 capitalize">{s}</span>            </Button>          ))}        </div>      </div>      {/* Active Tab */}      <div className="space-y-2">        <Label className="text-sm font-medium">Active Tab</Label>        <div className="grid grid-cols-2 gap-2">          {['Dashboard', 'Messages', 'Settings', 'Profile'].map((tab) => (            <Button              key={tab}              size="sm"              variant={activeTab === tab ? "default" : "outline"}              onClick={() => setActiveTab(tab)}              className="text-xs"            >              {tab}            </Button>          ))}        </div>      </div>      {/* Current Title Display */}      <div className="space-y-2">        <Label className="text-xs text-muted-foreground">Current document title:</Label>        <div className="bg-muted rounded p-2">          <code className="text-xs break-all">{documentTitle}</code>        </div>      </div>      <div className="text-xs text-muted-foreground text-center">        Check your browser tab to see the title updates      </div>    </div>  );}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Demonstrates advanced usage with notification counts, user status, and tab switching for complex application states.

Use Cases

This free open source React hook works well for:

Dashboard applications - Real-time notification counts built with Next.js and TypeScript
Chat interfaces - Unread message indicators using React state management
Task management - Progress indicators with Tailwind CSS styling integration
E-commerce sites - Cart item counts with seamless shadcn/ui compatibility
Admin panels - Status updates and alerts for JavaScript-based interfaces

API Reference

Prop	Type	Default	Description
`title`	`string`	required	The title text to set for the document

Implementation Notes

Hook executes on every title change using React's useEffect dependency array
Document title updates are batched with React's rendering cycle for optimal performance
Compatible with all modern browsers and Next.js deployment environments
Automatically handles string sanitization and special character encoding
Works seamlessly with React Strict Mode and development hot reloading

useDocumentTitle

Reactbutton

Reactbutton

Reactbadge

Reactlabel

On this page