RadCN
Recipesreadyreciperecipe

Typography

Typography is included in the RadCN public package surface with authored docs metadata, package import guidance, and a live preview.

Importimport { TypographyH1, TypographyP, TypographyInlineCode } from 'radcn/typography'
Preview

Live package example

Typography renders from the RadCN package in the docs app, with a compact example suitable for visual inspection.

Authored preview

Typography renders from the RadCN package in the docs app, with a compact example suitable for visual inspection.

Preview

RadCN documentation is web-first.

Portable primitives

Use remix/ui components with RadCN tokens.

Keep examples honest and package-backed.
  • Server-rendered HTML
  • Explicit browser enhancement
import { TypographyH1, TypographyP, TypographyInlineCode } from 'radcn/typography'

export function TypographyPreview() {
  return (
    <div>
      <TypographyLead>RadCN documentation is web-first.</TypographyLead>
      <TypographyP>Use <TypographyInlineCode>remix/ui</TypographyInlineCode> components.</TypographyP>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { TypographyH1, TypographyP, TypographyInlineCode } from 'radcn/typography'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Typography renders semantic host elements from the RadCN package so baseline accessibility is present in server HTML.
  • Interactive behavior is attached through explicit Remix 3 browser enhancement where the component requires runtime state.

Customization

  • Use RadCN CSS variables for color, radius, spacing, and focus treatment.
  • Target public typography data hooks and part classes from the package instead of depending on docs-only wrappers.

Remix 3 Notes

  • RadCN documents this surface as Remix UI package code rather than a copied React component.
  • The docs example imports from the package subpath users are intended to import from once installation is available.