Typography

 1import { Heading } from "@/components/wensity/typography";
 2
 3export function Headings() {
 4  return (
 5    <div className="flex flex-col gap-3">
 6      <Heading level={1}>Heading One</Heading>
 7      <Heading level={2}>Heading Two</Heading>
 8      <Heading level={3}>Heading Three</Heading>
 9      <Heading level={4}>Heading Four</Heading>
10      <Heading level={5}>Heading Five</Heading>
11      <Heading level={6}>Heading Six</Heading>
12    </div>
13  );
14}

 1import { Prose } from "@/components/wensity/typography";
 2
 3export function Article() {
 4  return (
 5    <Prose>
 6      <h2>Getting started</h2>
 7      <p>
 8        Wensity primitives are unstyled by default and composed with
 9        <strong> Tailwind</strong> utility classes.
10      </p>
11      <blockquote>Good defaults matter more than options.</blockquote>
12      <ul>
13        <li>Install with the CLI or copy the source directly.</li>
14        <li>Every primitive ships with keyboard and focus support.</li>
15      </ul>
16    </Prose>
17  );
18}

 1import { Heading, Lead } from "@/components/wensity/typography";
 2
 3export function Intro() {
 4  return (
 5    <div className="flex flex-col gap-2">
 6      <Heading level={2}>Wensity UI</Heading>
 7      <Lead>
 8        A primitive library built for teams who care about the details
 9        other kits skip.
10      </Lead>
11    </div>
12  );
13}

 1import { Muted } from "@/components/wensity/typography";
 2
 3export function FileMeta() {
 4  return (
 5    <div>
 6      <p className="text-[15px] font-medium">Quarterly report.pdf</p>
 7      <Muted>2.4 MB · Uploaded by Jordan Lee</Muted>
 8    </div>
 9  );
10}

1import { InlineCode } from "@/components/wensity/typography";
2
3export function Instructions() {
4  return (
5    <p>
6      Run <InlineCode>pnpm install</InlineCode> to fetch dependencies.
7    </p>
8  );
9}