Module 01: Fundamentals
The atoms of UI: Typography and Actions.
Every interface starts with these basic building blocks. Catalyst provides opinionated, accessible wrappers for standard HTML elements.
1. Typography
Use Heading, Subheading, and Text to maintain consistent vertical rhythm and readability.
Page Title
Section subtitle or description.
This is a standard paragraph using <Text>. It handles colors for light and dark modes automatically. You can also use <Strong> for emphasis and <Code> for technical terms.
Small text variant for secondary info or captions.
2. Buttons
The Button component is polymorphic. It determines whether to render a <button> or an <a> tag based on the presence of the href prop.
3. Links
Use Link for interactive text elements that navigate. It integrates with your router (e.g., Next.js Link) if configured in ui/catalyst/link.jsx.
Visit the Catalyst Home to see more.