Text

const textFixture = {
  id: "text",
  items: [
    { copy: "Apps, APIs and deploys that stay understandable.", variant: "body" },
    { copy: "Secondary supporting copy.", variant: "muted" },
    { copy: "Small print for captions.", variant: "small" },
    { copy: "build · 2026.06.21 · a1b2c3d", variant: "mono" },
  ],
} satisfies {
  id: string;
  items: ReadonlyArray<{ copy: string; variant: "body" | "muted" | "small" | "mono" }>;
};
 
import { Text } from "@grassroot/ui-react";
 
export default function TextDemo() {
  return (
    <div>
      {textFixture.items.map((item) => (
        <Text key={item.variant} variant={item.variant}>
          {item.copy}
        </Text>
      ))}
    </div>
  );
}

<script setup lang="ts">
const textFixture = {
  id: "text",
  items: [
    { copy: "Apps, APIs and deploys that stay understandable.", variant: "body" },
    { copy: "Secondary supporting copy.", variant: "muted" },
    { copy: "Small print for captions.", variant: "small" },
    { copy: "build · 2026.06.21 · a1b2c3d", variant: "mono" },
  ],
} satisfies {
  id: string;
  items: ReadonlyArray<{ copy: string; variant: "body" | "muted" | "small" | "mono" }>;
};
 
import { Text } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Text v-for="item in textFixture.items" :key="item.variant" :variant="item.variant">{{
      item.copy
    }}</Text>
  </div>
</template>

import { Component } from "@angular/core";
const textFixture = {
  id: "text",
  items: [
    { copy: "Apps, APIs and deploys that stay understandable.", variant: "body" },
    { copy: "Secondary supporting copy.", variant: "muted" },
    { copy: "Small print for captions.", variant: "small" },
    { copy: "build · 2026.06.21 · a1b2c3d", variant: "mono" },
  ],
} satisfies {
  id: string;
  items: ReadonlyArray<{ copy: string; variant: "body" | "muted" | "small" | "mono" }>;
};
 
import { GrassrootText } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-text-demo",
  standalone: true,
  imports: [GrassrootText],
  template: `
    <div>
      @for (item of fixture.items; track item.variant) {
        <grassroot-text [variant]="item.variant">{{ item.copy }}</grassroot-text>
      }
    </div>
  `,
})
export class TextDemoComponent {
  protected readonly fixture = textFixture;
}
 
export default TextDemoComponent;

<script lang="ts">
  const textFixture = {
    id: "text",
    items: [
      { copy: "Apps, APIs and deploys that stay understandable.", variant: "body" },
      { copy: "Secondary supporting copy.", variant: "muted" },
      { copy: "Small print for captions.", variant: "small" },
      { copy: "build · 2026.06.21 · a1b2c3d", variant: "mono" },
    ],
  } satisfies {
    id: string;
    items: ReadonlyArray<{ copy: string; variant: "body" | "muted" | "small" | "mono" }>;
  };
 
  import { Text } from "@grassroot/ui-svelte";
</script>
 
<div>
  {#each textFixture.items as item (item.variant)}
    <Text variant={item.variant}>{item.copy}</Text>
  {/each}
</div>

/** @jsxImportSource solid-js */
import { Text } from "@grassroot/ui-solid";
const textFixture = {
  id: "text",
  items: [
    { copy: "Apps, APIs and deploys that stay understandable.", variant: "body" },
    { copy: "Secondary supporting copy.", variant: "muted" },
    { copy: "Small print for captions.", variant: "small" },
    { copy: "build · 2026.06.21 · a1b2c3d", variant: "mono" },
  ],
} satisfies {
  id: string;
  items: ReadonlyArray<{ copy: string; variant: "body" | "muted" | "small" | "mono" }>;
};
 
export default function TextDemo() {
  return (
    <div>
      {textFixture.items.map((item) => (
        <Text variant={item.variant}>{item.copy}</Text>
      ))}
    </div>
  );
}