Blockquote

Typography

Styled quotation block with optional attribution.

Preview

Design is not just what it looks like and feels like. Design is how it works.

Usage

example.jsx

import { Blockquote } from "@/components/ui/blockquote";

export default function Example() {
  return <Blockquote />;
}

Source Code

Copy this file into components/ui/blockquote.jsx in your project.

blockquote.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Blockquote = forwardRef(({ className, ...props }, ref) => (
  <blockquote ref={ref} className={cn("mt-6 border-l-2 pl-6 italic text-muted-foreground", className)} {...props} />
));
Blockquote.displayName = "Blockquote";

export { Blockquote };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge