@usevyre/react @usevyre/vue

Typography

Semantic text components built on design tokens. Use Heading for titles, Text for body copy, Lead for introductory paragraphs, Code for inline and block code, and Blockquote for quoted content. All components are polymorphic — render any HTML element via the as prop.

Heading

Six size variants mapped to --vyre-typography-font-size-* tokens. Use as to control the rendered HTML element independently from visual size.

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox
The quick brown fox
 
import { Heading } from "@usevyre/react";

<Heading as="h1" size="3xl">Page title</Heading>
<Heading as="h2" size="2xl">Section title</Heading>
<Heading as="h3" size="xl">Subsection</Heading>
<Heading as="h4" size="lg">Card heading</Heading>

Text & Lead

Text covers all body copy use cases — size, weight, color, and font family. Lead is a shortcut for introductory paragraphs.

Lead text — introductory paragraph with slightly larger, muted text.

Default body text — the standard paragraph style.

Muted text — used for secondary information.

Accent text — draws attention to key content.

Danger text — errors and destructive actions.

Success text — confirmations and positive outcomes.

Semibold weight text.

Monospace text — for technical values and code references.

Extra small text — captions and metadata.

 
import { Text, Lead } from "@usevyre/react";

<Lead>Introductory paragraph with larger, muted text.</Lead>
<Text>Default body text.</Text>
<Text color="muted">Secondary information.</Text>
<Text color="accent">Highlighted content.</Text>
<Text color="danger">Error message.</Text>
<Text weight="semibold">Semibold weight.</Text>
<Text mono>monospace value</Text>
<Text size="xs" color="muted">Caption text.</Text>

Code & Blockquote

Code renders inline by default. Add block for a <pre> code block. Blockquote adds a left accent border for quoted content.

Install the package: npm install @usevyre/react

Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs
import { Button } from "@usevyre/react";

export default function App() {
  return <Button variant="accent">Get started</Button>;
}
 
import { Text, Code, Blockquote } from "@usevyre/react";

// Inline code
<Text>Run <Code>npm install @usevyre/react</Code> to install.</Text>

// Block code
<Code block>{`import { Button } from "@usevyre/react";

export default function App() {
  return <Button variant="accent">Get started</Button>;
}`}</Code>

// Blockquote
<Blockquote>
  Design is not just what it looks like. Design is how it works.
</Blockquote>

Props — Heading

Props

Prop Type Default Description
as "h1"|"h2"|"h3"|"h4"|"h5"|"h6" "h2" HTML element to render.
size "xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"3xl" "md" Font size of the heading.
weight "normal"|"medium"|"semibold"|"bold" "bold" Font weight.
color "default"|"muted"|"accent"|"danger"|"success"|"warning" "default" Text color.
truncate boolean false Truncate overflow text with an ellipsis.
class / className string — Additional CSS class.

Props — Text

Props

Prop Type Default Description
as "p"|"span"|"div"|"label"|"li"|"dt"|"dd" "p" HTML element to render.
size "xs"|"sm"|"md"|"lg"|"xl" "md" Font size.
weight "normal"|"medium"|"semibold"|"bold" — Font weight override.
color "default"|"muted"|"accent"|"danger"|"success"|"warning" "default" Text color.
truncate boolean false Truncate overflow with ellipsis.
mono boolean false Use monospace font family.
class / className string — Additional CSS class.

Props — Code

Props

Prop Type Default Description
block boolean false Renders as a <pre><code> block instead of inline <code>.
class / className string — Additional CSS class.
← Tooltip