Text
A polymorphic body text component with size, weight, tone, and alignment variants.
Loading preview…
1<script lang="ts">
2 import Text from './text.svelte';
3</script>
4
5<div class="flex flex-col gap-2">
6 <Text size="lg">The quick brown fox jumps over the lazy dog.</Text>
7 <Text size="sm" tone="muted">Supporting copy in a muted tone.</Text>
8</div>
9Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/text/text.svelte
- ~/components/text/text.types.ts
- ~/components/text/text.variants.ts
Usage
Use text for paragraphs, captions, and inline copy. It renders a p by default; as switches the
element without changing the typographic styling. Set size, weight, tone, and align to style it.
1<script lang="ts">
2 import Text from '~/components/text/text.svelte';
3</script>
4
5<Text size="lg">The quick brown fox jumps over the lazy dog.</Text>
6<Text as="span" size="sm" tone="muted">Last updated 2 hours ago</Text>