Setting the file. One moment.
Skill 12 · Building Admin Dashboard Customizations
Subchapter 12.6
references/typography.mdMarkdown5 KBView on GitHub
Use the Text component from @medusajs/ui for all text elements. Follow these specific patterns:
Use this pattern for section headings, field labels, or any primary text:
<Text size="small" leading="compact" weight="plus">
{labelText}
</Text>Use this pattern for descriptions, helper text, or secondary information:
<Text size="small" leading="compact" className="text-ui-fg-subtle">
{descriptionText}
</Text><Heading> component for small sections within widgets/containerssize="small" and leading="compact" for consistencyweight="plus" for labels and headingsclassName="text-ui-fg-subtle" for secondary/descriptive text<Heading> componentimport { Text } from "@medusajs/ui"
// In a container or widget:
<div className="flex flex-col gap-y-2">
<Text size="small" leading="compact" weight="plus">
Product Settings
</Text>
<Text size="small" leading="compact" className="text-ui-fg-subtle">
Configure how this product appears in your store
</Text>
</div><div className="flex flex-col gap-y-1">
<Text size="small" leading="compact" weight="plus">
Premium T-Shirt
</Text>
<Text size="small" leading="compact" className="text-ui-fg-subtle">
Size: Large • Color: Blue
</Text>
</div>import { Container, Heading } from "@medusajs/ui"
<Container className="divide-y p-0">
<div className="flex items-center justify-between px-6 py-4">
<Heading level="h2">Related Products</Heading>
</div>
{/* ... */}
</Container><Text size="small" leading="compact" className="text-ui-fg-subtle">
No related products selected
</Text><div className="flex flex-col gap-y-2">
<Text size="small" leading="compact" weight="plus">
Display Name
</Text>
<Input {...props} />
</div><Text size="small" className="text-ui-fg-error">
This field is required
</Text><div className="flex items-center gap-x-2">
<Text size="small" leading="compact" weight="plus">
Status:
</Text>
<Text size="small" leading="compact" className="text-ui-fg-subtle">
Active
</Text>
</div>Medusa UI provides semantic color classes:
text-ui-fg-base - Default text color (rarely needed, it’s the default)text-ui-fg-subtle - Secondary/muted texttext-ui-fg-muted - Even more mutedtext-ui-fg-disabled - Disabled statetext-ui-fg-error - Error messagestext-ui-fg-success - Success messagestext-ui-fg-warning - Warning messages<div className="grid grid-cols-2 gap-4">
<div className="flex flex-col gap-y-1">
<Text size="small" leading="compact" className="text-ui-fg-subtle">
Category
</Text>
<Text size="small" leading="compact" weight="plus">
Clothing
</Text>
</div>
<div className="flex flex-col gap-y-1">
<Text size="small" leading="compact" className="text-ui-fg-subtle">
Status
</Text>
<Text size="small" leading="compact" weight="plus">
Published
</Text>
</div>
</div><div className="flex items-center gap-x-2">
<Text size="small" leading="compact" className="text-ui-fg-subtle">
SKU:
</Text>
<Text size="small" leading="compact" weight="plus">
SHIRT-001
</Text>
</div><div className="flex flex-col gap-y-2">
<Text size="small" leading="compact" weight="plus">
Premium Cotton T-Shirt
</Text>
<div className="flex items-center gap-x-2 text-ui-fg-subtle">
<Text size="small" leading="compact">
$29.99
</Text>
<Text size="small" leading="compact">
•
</Text>
<Text size="small" leading="compact">
In stock
</Text>
</div>
</div>| Use Case | Pattern |
|---|---|
| Section headings | weight="plus" |
| Primary text | weight="plus" |
| Labels | weight="plus" |
| Descriptions | className="text-ui-fg-subtle" |
| Helper text | className="text-ui-fg-subtle" |
| Metadata | className="text-ui-fg-subtle" |
| Errors | className="text-ui-fg-error" |
| Empty states | className="text-ui-fg-subtle" |
| Large headers | <Heading> component |