Hardcoding typography across dashboards, modals, and forms leads to inconsistent sizes, weights, and colors that drift when designers touch the theme. Without a primitive, teams either repeat Tailwind classes or build ad-hoc wrappers that fragment the design system.

Text is a flexible semantic wrapper with a controlled as prop (rendering p, span, div, or label) and four typographic dimensions: size (xs, sm, md, lg), weight (normal, medium, semibold, bold), color (default, muted, accent, danger, success), and any HTML attribute through spread props. A data-react-fancy-text handle enables agent queries.

Import from @particle-academy/react-fancy, then drop in <Text size="lg" weight="semibold" color="accent">Your label</Text> or use <Text as="label"> to swap the rendered element. Agents can read and update the text content via the stable data-react-fancy-text selector.