Text

import { Eyebrow, Heading, Text } from "@grassroot/ui-react";
 
<Eyebrow>01 · Infrastructure</Eyebrow>
<Heading level={1}>Software you can stop worrying about.</Heading>
<Text>Apps, APIs and deploys that stay understandable.</Text>
<Text variant="muted">Secondary supporting copy.</Text>
<Text variant="mono">build · 2026.06.21 · a1b2c3d</Text>

<script setup lang="ts">
import { Eyebrow, Heading, Text } from "@grassroot/ui-vue";
</script>
 
<template>
  <Eyebrow>01 · Infrastructure</Eyebrow>
  <Heading :level="1">Software you can stop worrying about.</Heading>
  <Text>Apps, APIs and deploys that stay understandable.</Text>
  <Text variant="muted">Secondary supporting copy.</Text>
  <Text variant="mono">build · 2026.06.21 · a1b2c3d</Text>
</template>

import { Component } from "@angular/core";
import { GrassrootEyebrow, GrassrootHeading, GrassrootText } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootEyebrow, GrassrootHeading, GrassrootText],
  template: `
    <grassroot-eyebrow>01 · Infrastructure</grassroot-eyebrow>
    <grassroot-heading [level]="1">Software you can stop worrying about.</grassroot-heading>
    <grassroot-text>Apps, APIs and deploys that stay understandable.</grassroot-text>
    <grassroot-text variant="muted">Secondary supporting copy.</grassroot-text>
    <grassroot-text variant="mono">build · 2026.06.21 · a1b2c3d</grassroot-text>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Eyebrow, Heading, Text } from "@grassroot/ui-svelte";
</script>
 
<Eyebrow>01 · Infrastructure</Eyebrow>
<Heading level={1}>Software you can stop worrying about.</Heading>
<Text>Apps, APIs and deploys that stay understandable.</Text>
<Text variant="muted">Secondary supporting copy.</Text>
<Text variant="mono">build · 2026.06.21 · a1b2c3d</Text>

import { Eyebrow, Heading, Text } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Eyebrow>01 · Infrastructure</Eyebrow>
      <Heading level={1}>Software you can stop worrying about.</Heading>
      <Text>Apps, APIs and deploys that stay understandable.</Text>
      <Text variant="muted">Secondary supporting copy.</Text>
      <Text variant="mono">build · 2026.06.21 · a1b2c3d</Text>
    </>
  );
}