React Dialog Block Daily Quote

Daily quote dialog with inspirational message, author attribution, and share options for React motivation apps

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Start each day with inspiration. This React daily quote dialog displays a motivational quote with author attribution and easy sharing options to spread positivity. Built with shadcn/ui Dialog and Button components using Tailwind CSS, users receive daily doses of wisdom and motivation. Read quote, feel inspired, share wisdom—perfect for wellness apps, productivity tools, morning routine apps, or any Next.js application where daily inspiration increases user engagement and positive sentiment.

"use client";

import { useState } from "react";
import { Sparkles, Copy, Share2, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogTrigger,
  DialogTitle,
} from "@/components/ui/dialog";

const quote = {
  text: "The only way to do great work is to love what you do.",
  author: "Steve Jobs",
};

export const title = "React Dialog Block Daily Quote";

export default function DialogDailyQuote() {
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(`"${quote.text}" — ${quote.author}`);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="outline">
            <Sparkles className="mr-2 h-4 w-4" />
            Daily Quote
          </Button>
        </DialogTrigger>
      </div>
      <DialogContent style={{ maxWidth: "384px" }} className="text-center">
        <DialogTitle className="sr-only">Daily Quote</DialogTitle>
        <div className="py-6">
          <Sparkles className="h-6 w-6 text-primary mx-auto" />
          <blockquote className="mt-6">
            <p className="text-lg font-medium leading-relaxed">
              "{quote.text}"
            </p>
            <footer className="mt-4 text-sm text-muted-foreground">
              — {quote.author}
            </footer>
          </blockquote>
        </div>

        <div className="flex gap-2">
          <Button
            variant="outline"
            className="flex-1"
            onClick={handleCopy}
          >
            {copied ? (
              <>
                <Check className="mr-2 h-4 w-4" />
                Copied
              </>
            ) : (
              <>
                <Copy className="mr-2 h-4 w-4" />
                Copy
              </>
            )}
          </Button>
          <Button
            variant="outline"
            className="flex-1"
            onClick={() => setOpen(false)}
          >
            <Share2 className="mr-2 h-4 w-4" />
            Share
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState } from "react";import { Sparkles, Copy, Share2, Check } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogTrigger,  DialogTitle,} from "@/components/ui/dialog";const quote = {  text: "The only way to do great work is to love what you do.",  author: "Steve Jobs",};export const title = "React Dialog Block Daily Quote";export default function DialogDailyQuote() {  const [open, setOpen] = useState(false);  const [copied, setCopied] = useState(false);  const handleCopy = () => {    navigator.clipboard.writeText(`"${quote.text}" — ${quote.author}`);    setCopied(true);    setTimeout(() => setCopied(false), 2000);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Sparkles className="mr-2 h-4 w-4" />            Daily Quote          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "384px" }} className="text-center">        <DialogTitle className="sr-only">Daily Quote</DialogTitle>        <div className="py-6">          <Sparkles className="h-6 w-6 text-primary mx-auto" />          <blockquote className="mt-6">            <p className="text-lg font-medium leading-relaxed">              "{quote.text}"            </p>            <footer className="mt-4 text-sm text-muted-foreground">              — {quote.author}            </footer>          </blockquote>        </div>        <div className="flex gap-2">          <Button            variant="outline"            className="flex-1"            onClick={handleCopy}          >            {copied ? (              <>                <Check className="mr-2 h-4 w-4" />                Copied              </>            ) : (              <>                <Copy className="mr-2 h-4 w-4" />                Copy              </>            )}          </Button>          <Button            variant="outline"            className="flex-1"            onClick={() => setOpen(false)}          >            <Share2 className="mr-2 h-4 w-4" />            Share          </Button>        </div>      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-daily-quote.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-daily-quote.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-daily-quote.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-daily-quote.json

Pro block — Sign in to install

React Dialog Block Mood Check

Wellness tracking

React Dialog Block Streak Tracker

Daily habits

React Dialog Block Share Link

Content sharing

React Dialog Block Copy Clipboard

Copy text

React Dialog Block Breathing Exercise

Mindfulness

React Dialog Block Quick Note

Save thoughts

Questions you might have

"use client"; import { useState } from "react"; import { Sparkles, Copy, Share2, Check } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogTrigger, DialogTitle, } from "@/components/ui/dialog"; const quote = { text: "The only way to do great work is to love what you do.", author: "Steve Jobs", }; export const title = "React Dialog Block Daily Quote"; export default function DialogDailyQuote() { const [open, setOpen] = useState(false); const [copied, setCopied] = useState(false); const handleCopy = () => { navigator.clipboard.writeText(`"${quote.text}" — ${quote.author}`); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return ( <Dialog open={open} onOpenChange={setOpen}> <div className="flex min-h-[350px] items-center justify-center"> <DialogTrigger asChild> <Button variant="outline"> <Sparkles className="mr-2 h-4 w-4" /> Daily Quote </Button> </DialogTrigger> </div> <DialogContent style={{ maxWidth: "384px" }} className="text-center"> <DialogTitle className="sr-only">Daily Quote</DialogTitle> <div className="py-6"> <Sparkles className="h-6 w-6 text-primary mx-auto" /> <blockquote className="mt-6"> <p className="text-lg font-medium leading-relaxed"> "{quote.text}" </p> <footer className="mt-4 text-sm text-muted-foreground"> — {quote.author} </footer> </blockquote> </div> <div className="flex gap-2"> <Button variant="outline" className="flex-1" onClick={handleCopy} > {copied ? ( <> <Check className="mr-2 h-4 w-4" /> Copied </> ) : ( <> <Copy className="mr-2 h-4 w-4" /> Copy </> )} </Button> <Button variant="outline" className="flex-1" onClick={() => setOpen(false)} > <Share2 className="mr-2 h-4 w-4" /> Share </Button> </div> </DialogContent> </Dialog> ); }

React Dialog Block Daily Quote

Installation

Related blocks you will also like

React Dialog Block Mood Check

React Dialog Block Streak Tracker

React Dialog Block Share Link

React Dialog Block Copy Clipboard

React Dialog Block Breathing Exercise

React Dialog Block Quick Note

Questions you might have

Where do I get quotes from?

When should quotes appear?

Can quotes be personalized?

How can users interact with quotes?

Should I show quote history?

How do I keep quotes fresh?