CLI previewInstall commands shown on this site are not released yet.

DocsComponentsPrimitives

Eyebrow

React example follows below.
ts
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>
ts
<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>
ts
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 {
}
ts
<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>
ts
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>
</>
);
}

Installation

bash
pnpm dlx grassroot add ui/eyebrow
bash
npx grassroot@latest add ui/eyebrow
bash
yarn dlx grassroot add ui/eyebrow
bash
bunx grassroot add ui/eyebrow

API Reference

EyebrowProps
PropTypeDefault
asOverride the rendered element.React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined"span"