Typography

Skill reaviz/skills/reablocks/typography

AI Skills for Reaviz Projects

Install

npx -y skills add reaviz/skills --skill typography

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.1 KB, as published. Nobody here has run it

Typography

Themed text components for headings, paragraphs, and semantic text styles. All share a single TypographyTheme and follow the same pattern: thin forwardRef wrappers that render a semantic HTML element with themed classes merged via cn().

Import

import { H1, H2, H3, H4, H5, H6, P, BlockQuote, Lead, Large, Small, Muted } from 'reablocks';

Components

All accept className, theme, children, ref, and their respective HTML element attributes.

Component	HTML Element	Default Styles
`H1`	`<h1>`	`text-4xl font-extrabold tracking-tight text-balance`
`H2`	`<h2>`	`text-3xl font-semibold tracking-tight border-b border-surface pb-2`
`H3`	`<h3>`	`text-2xl font-semibold tracking-tight`
`H4`	`<h4>`	`text-xl font-semibold tracking-tight`
`H5`	`<h5>`	`text-lg font-semibold tracking-tight`
`H6`	`<h6>`	`text-base font-semibold tracking-tight`
`P`	`<p>`	`leading-7 [&:not(:first-child)]:mt-6`
`BlockQuote`	`<blockquote>`	`mt-6 border-l-2 border-surface pl-6 italic`
`Lead`	`<p>`	`text-xl text-text-secondary`
`Large`	`<div>`	`text-lg font-semibold`
`Small`	`<small>`	`text-sm leading-none font-medium`
`Muted`	`<p>`	`text-sm text-text-secondary`

All headings (H1–H6) include scroll-m-20 for scroll-margin compatibility with anchor links.

Common Props

Every typography component accepts:

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes (merged last)
`theme`	`TypographyTheme`	—	Per-instance theme override
`children`	`ReactNode`	—	Text content
`ref`	`Ref`	—	Forward ref to the HTML element

Plus all attributes of the underlying HTML element.

Basic Usage

<H1>Page Title</H1>
<H2>Section Heading</H2>
<P>Body paragraph text with automatic top margin on non-first children.</P>
<BlockQuote>A notable quote with left border and italic styling.</BlockQuote>
<Lead>Intro text in larger, secondary-colored style.</Lead>
<Large>Emphasized larger text.</Large>
<Small>Fine print or label text.</Small>
<Muted>Subdued helper text.</Muted>

Full Page Example

<div className="max-w-2xl">
  <H1>The Page Title</H1>
  <Lead>A brief introduction paragraph in larger, muted style.</Lead>
  <H2>Section Heading</H2>
  <P>Regular paragraph content with leading-7 line height.</P>
  <BlockQuote>A quoted passage with left border.</BlockQuote>
  <H3>Subsection</H3>
  <P>More content here.</P>
  <Large>Important callout text</Large>
  <Small>Fine print label</Small>
  <Muted>Helper text in muted style</Muted>
</div>

TypographyTheme Interface

All components share this single theme object (keyed as 'typography' in the theme):

interface TypographyTheme {
  h1: string;
  h2: string;
  h3: string;
  h4: string;
  h5: string;
  h6: string;
  p: string;
  blockquote: string;
  lead: string;
  large: string;
  small: string;
  muted: string;
}

Default and unify themes are identical for typography.

2 things to look at

SKILL.md

Typography

Import

Components

Common Props

Basic Usage

Full Page Example

TypographyTheme Interface

Keep looking