Back to Components
Content
Quote Block
Styled blockquote with attribution and optional avatar.
PropsUsage ExampleVariations
“Clarity in the UI makes every decision faster and every handoff smoother.”
Maya Patel
Design Director
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/quote-block.tsx
Installation
Using shadcn CLI
npx shadcn add quote-block --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Content Components
Changelog Entry
Version entry with tags, date, and collapsible details.
Code Block
Code display with optional highlighted HTML and a copy button.
Code Diff
Side by side code diff viewer with line numbers and highlights.
Link Preview
OpenGraph style preview card with image, title, description, and domain.
Terminal Window
Retro terminal window with title bar, prompt, and typing effect.