The Text component is a versatile typographic element that allows rendering text in multiple semantic HTML tags while applying styles, truncation, and custom variants.

• Flexible semantic tags: h1, h2, p, span, small, and more.
• Styling: Inline styles, color, font weight, and custom CSS.
• Line truncation: Limit displayed lines with the lines prop.

Usage Example

Preview

Main Title

Subtitle Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Italic Span Text Small caption or note

Code

<script lang="ts">
  import { Text } from "@fefade-ui/svelte"
</script>

<div
  style="
    max-width: 500px;
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    "
>
  <Text as="h1" style="color: aqua;">Main Title</Text>

  <Text as="h2" style="font-weight: bold;">Subtitle Bold</Text>

  <Text as="p" lines={2}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud.
  </Text>

  <Text as="span" style="font-style: italic; color: purple;">
    Italic Span Text
  </Text>

  <Text as="small" style="color: gray;">Small caption or note</Text>
</div>

Props

Prop	Type	Default	Description
as	string	"span"	The HTML element to render (h1, h2, p, etc.)
lines	number	undefined	Number of lines to display before truncating text
style	string	undefined	Inline styles applied to the text