1export function Example() {2  return (3    <div className="typeset typeset-docs">4      <h1>Typeset</h1>5      <p>6        A styling system for HTML and rendered markdown. One CSS file you own —7        wrap content in <code>typeset</code> and the rhythm follows.8      </p>9      <h2>Rhythm</h2>10      <p>11        Three controls drive everything: <strong>size</strong>,{" "}12        <strong>leading</strong>, and <strong>flow</strong>. Headings, lists,13        and rules derive from them.14      </p>15      <ul>16        <li>Fits its container</li>17        <li>Uses your theme tokens</li>18        <li>Stable for streaming appends</li>19      </ul>20      <blockquote>21        <p>Spacing flows with margin-block-start only — new blocks do not restyle earlier ones.</p>22      </blockquote>23    </div>24  )25}

1export function Example() {2  return (3    <div className="flex flex-col gap-8">4      <div>5        <p className="mb-2 text-xs tracking-wide text-muted-foreground">6          typeset-docs7        </p>8        <div className="typeset typeset-docs">9          <h3>Docs rhythm</h3>10          <p>Roomier flow for articles and documentation.</p>11        </div>12      </div>13      <div>14        <p className="mb-2 text-xs tracking-wide text-muted-foreground">15          typeset-chat16        </p>17        <div className="typeset typeset-chat">18          <h3>Chat rhythm</h3>19          <p>Tighter leading and flow for message bubbles.</p>20        </div>21      </div>22    </div>23  )24}

1import {2  Card,3  CardDescription,4  CardHeader,5  CardTitle,6} from "@/components/ui/card"78export function Example() {9  return (10    <div className="typeset typeset-docs">11      <p>Styled prose sits in the typeset container.</p>12      <Card className="not-typeset mt-4">13        <CardHeader>14          <CardTitle>Untouched card</CardTitle>15          <CardDescription>16            Opt out with not-typeset or data-not-typeset.17          </CardDescription>18        </CardHeader>19      </Card>20    </div>21  )22}