Happiness lies not in the mere possession of money; it lies in the joy of achievement, in the thrill of creative effort. Franklin Roosevelt

); }; export BlockquoteDemo; `,__src__:"src/registry/default/example/extra-new/blockquote/blockquote-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`import React from "react"; import { Blockquote, BlockquoteAuthor, } from "@/components/ui/extension/blockquote"; const BlockquoteDemo = () => { return (

Happiness lies not in the mere possession of money; it lies in the joy of achievement, in the thrill of creative effort. Franklin Roosevelt

); }; export BlockquoteDemo; `,__src__:"src/registry/default/example/extra-new/blockquote/blockquote-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" Blockquote,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" BlockquoteAuthor,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/blockquote"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" BlockquoteDemo"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Blockquote"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" Happiness lies not in the mere possession of money; it lies in the joy of"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" achievement, in the thrill of creative effort."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"BlockquoteAuthor"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">Franklin Roosevelt"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" BlockquoteDemo;"})]})]})})})}),` `,(0,n.jsx)(e.h2,{id:"installation",children:"Installation"}),` `,(0,n.jsxs)(p,{defaultValue:"cli",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(s,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(c,{name:"blockquote",children:(0,n.jsx)(e.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react"; import { cn } from "@/lib/utils"; type BlockquoteProps = { children?: React.ReactNode; className?: string; }; const Blockquote = ({ children, className }: BlockquoteProps) => { return (

{children}

); }; const BlockquoteAuthor = ({ children, className }: BlockquoteProps) => { return (

{children}

); }; export { Blockquote, BlockquoteAuthor }; `,__src__:"src/registry/default/extension/blockquote.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`import React from "react"; import { cn } from "@/lib/utils"; type BlockquoteProps = { children?: React.ReactNode; className?: string; }; const Blockquote = ({ children, className }: BlockquoteProps) => { return (

{children}

); }; const BlockquoteAuthor = ({ children, className }: BlockquoteProps) => { return (

{children}

); }; export { Blockquote, BlockquoteAuthor }; `,__src__:"src/registry/default/extension/blockquote.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { cn } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/lib/utils"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" BlockquoteProps"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" children"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"ReactNode"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" Blockquote"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" BlockquoteProps"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:` "relative rounded-lg border-l-8 border-l-gray-700 bg-gray-100 py-5 pl-16 pr-5 font-sans text-lg italic leading-relaxed text-gray-500 before:absolute before:left-3 before:top-3 before:font-serif before:text-6xl before:text-gray-700 before:content-['\u201C']"`}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" className,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" BlockquoteAuthor"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" BlockquoteProps"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"p"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "mt-5 pr-4 text-right font-bold not-italic text-gray-700"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" className,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { Blockquote, BlockquoteAuthor };"})]})]})})})}),(0,n.jsx)(r,{children:"Update the import paths to match your project setup."})]})}),(0,n.jsxs)(s,{value:"cli",children:[(0,n.jsx)(r,{children:"Run the following command "}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-dimmed",__rawString__:`npx @shadext/cli add blockquote `,__npmCommand__:`npx @shadext/cli add blockquote `,__yarnCommand__:`npx @shadext/cli add blockquote `,__pnpmCommand__:`pnpm dlx @shadext/cli add blockquote `,__bunCommand__:`bunx --bun @shadext/cli add blockquote `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark-dimmed",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:" @shadext/cli"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:" blockquote"})]})})})})]})]})]})}function m(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(B,{...l})}):B(l)}function t(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return q(_);})(); ;return Component;

Blockquote

Installation

Run the following command

Table of Content

Github