Will Opensource UI ever be paid?

No. Opensource UI components stay free under the MIT license for personal and commercial use — permanently. Optional sponsorships support the project; they do not unlock components or turn the library into a paid product.

Are Opensource UI components reusable across projects?

Yes. Every component is copy-paste TypeScript you own after pasting. Use the same pieces across React and Next.js apps with no Opensource UI npm package and no vendor lock-in.

What do I get in the Opensource UI library?

Live previews, copy-ready TypeScript source, Tailwind CSS blocks, buttons, widgets, forms, social cards, loaders, tables, and Apple-style device mockups including iPhone, MacBook, iPad, Watch, and browser frames at opensourceui.in/components.

Is Opensource UI code clean enough for production?

Yes. Source is TypeScript-first with readable props and Tailwind utilities in the file you paste — not a black-box package. Edit, delete, or restyle anything after it lands in your repo under the MIT license.

What design principles does Opensource UI follow?

Quiet neutral stage, clear type, hairline borders. Accents only for state or demos. No purple-gradient dashboard chrome. Motion respects reduced-motion. Responsive with base styles plus md breakpoints. Focus uses border change, not colored rings.

Why is there no dark mode on Opensource UI?

Craft Bench is intentionally light: paper white, ink text, quiet borders, so demos stay readable and consistent. Components you copy are yours — add dark variants in your app if needed. The catalog keeps one clear visual language.

How do I use Opensource UI components?

Open any component on opensourceui.in/components, copy the TypeScript source, paste it into your React or Next.js app, and adjust imports. No npm install of an Opensource UI package is required.

Is Opensource UI the same as shadcn/ui or Material UI?

No. Opensource UI is a separate open-source project at opensourceui.in by Bidyut Kundu — copy-paste React and Next.js UI with its own components, mockups, and design system. Not shadcn/ui, Material UI, or another kit rebranded.

How do I use Editorial Quote in my project?

Copy the EditorialQuoteCard source code from https://opensourceui.in/components/editorial-quote, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Editorial Quote in a commercial project?

Yes. Opensource UI is MIT licensed. You can use EditorialQuoteCard in personal and commercial projects without UI attribution.

Back to Text Components / Text

Editorial Quote

Pull quote with issue metadata and a highlighted word inside the line — author and role at the bottom. Built for case studies and long reads.

Your logo on every docs page

Platinum founding · 5 spots left

Claim

Preview

Issue 06 · Design

Good design is as little design as possible — but every pixel must earn its place.

Dieter Rams

Industrial Designer

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/text/editorial-quote-card.tsx in your project.
4
Import and render:
Example
import { EditorialQuoteCard } from "@/components/text/editorial-quote-card";
<EditorialQuoteCard />

lib/cn.ts

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

components/text/editorial-quote-card.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { forwardRef, type ComponentPropsWithoutRef } from "react";
 
import { cn } from "@/lib/cn";
 
import { Quote } from "lucide-react";
 
export type EditorialQuoteCardProps = Readonly<
  {
    quote?: string;
    author?: string;
    role?: string;
    issue?: string;
    accentWord?: string;
  } & ComponentPropsWithoutRef<"div">
>;
 
// Production-ready Editorial Quote component — styled with Tailwind CSS.
export const EditorialQuoteCard = forwardRef<
  HTMLDivElement,
  EditorialQuoteCardProps
>(
  (
    {
      className,
      quote = "Good design is as little design as possible — but every pixel must earn its place.",
      author = "Dieter Rams",
      role = "Industrial Designer",
      issue = "Issue 06 · Design",
      accentWord = "pixel",
      ...props
    },
    ref,
  ) => {
    const parts = quote.split(new RegExp(`(${accentWord})`, "i"));
    let segmentOffset = 0;
    const segments = parts.map((part) => {
      const segment = {
        id: `quote-part-${segmentOffset}`,
        part,
      };
      segmentOffset += part.length;
      return segment;
    });
 
    return (
      <div
        ref={ref}
        data-slot="editorial-quote-card"
        className={cn(
          "w-sm border border-neutral-200 bg-[#f6f2eb] p-5 font-sans md:p-6",
          className,
        )}
        {...props}
      >
        <div
          data-slot="editorial-quote-card-meta"
          className="mb-4 flex items-center justify-between border-b border-neutral-200 pb-3"
        >
          <span className="font-mono text-[10px] font-semibold tracking-widest text-neutral-500 uppercase">
            {issue}
          </span>
          <Quote size={18} className="text-neutral-400" />
        </div>
 
        <blockquote
          data-slot="editorial-quote-card-quote"
          className="text-lg leading-snug font-semibold tracking-tight text-neutral-700 md:text-xl"
        >
          {segments.map(({ id, part }) =>
            part.toLowerCase() === accentWord.toLowerCase() ? (
              <span
                key={id}
                className="rounded-sm bg-neutral-300/60 px-1 text-neutral-800"
              >
                {part}
              </span>
            ) : (
              <span key={id}>{part}</span>
            ),
          )}
        </blockquote>
 
        <div
          data-slot="editorial-quote-card-author"
          className="mt-5 flex items-center gap-3"
        >
          <div className="h-px flex-1 bg-neutral-200" />
          <div className="text-right">
            <p className="text-sm font-medium text-neutral-600">{author}</p>
            <p className="text-[11px] text-neutral-500">{role}</p>
          </div>
        </div>
      </div>
    );
  },
);
 
EditorialQuoteCard.displayName = "EditorialQuoteCard";

import { forwardRef, type ComponentPropsWithoutRef } from "react"; import { cn } from "@/lib/cn"; import { Quote } from "lucide-react"; export type EditorialQuoteCardProps = Readonly< { quote?: string; author?: string; role?: string; issue?: string; accentWord?: string; } & ComponentPropsWithoutRef<"div"> >; // Production-ready Editorial Quote component — styled with Tailwind CSS. export const EditorialQuoteCard = forwardRef< HTMLDivElement, EditorialQuoteCardProps >( ( { className, quote = "Good design is as little design as possible — but every pixel must earn its place.", author = "Dieter Rams", role = "Industrial Designer", issue = "Issue 06 · Design", accentWord = "pixel", ...props }, ref, ) => { const parts = quote.split(new RegExp(`(${accentWord})`, "i")); let segmentOffset = 0; const segments = parts.map((part) => { const segment = { id: `quote-part-${segmentOffset}`, part, }; segmentOffset += part.length; return segment; }); return ( <div ref={ref} data-slot="editorial-quote-card" className={cn( "w-sm border border-neutral-200 bg-[#f6f2eb] p-5 font-sans md:p-6", className, )} {...props} > <div data-slot="editorial-quote-card-meta" className="mb-4 flex items-center justify-between border-b border-neutral-200 pb-3" > <span className="font-mono text-[10px] font-semibold tracking-widest text-neutral-500 uppercase"> {issue} </span> <Quote size={18} className="text-neutral-400" /> </div> <blockquote data-slot="editorial-quote-card-quote" className="text-lg leading-snug font-semibold tracking-tight text-neutral-700 md:text-xl" > {segments.map(({ id, part }) => part.toLowerCase() === accentWord.toLowerCase() ? ( <span key={id} className="rounded-sm bg-neutral-300/60 px-1 text-neutral-800" > {part} </span> ) : ( <span key={id}>{part}</span> ), )} </blockquote> <div data-slot="editorial-quote-card-author" className="mt-5 flex items-center gap-3" > <div className="h-px flex-1 bg-neutral-200" /> <div className="text-right"> <p className="text-sm font-medium text-neutral-600">{author}</p> <p className="text-[11px] text-neutral-500">{role}</p> </div> </div> </div> ); }, ); EditorialQuoteCard.displayName = "EditorialQuoteCard";