@nexub/mcp 0.0.0-stage → 1.7.0

package/dist/skill/references/components/sheet.md

@@ -0,0 +1,51 @@
+# Sheet
+
+Alias for Drawer — slide-in sheet panel.
+
+- Package: `@nexub/react` · Category: Overlays · Status: stable
+- Import: `import { Sheet } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/sheet
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `Sheet.Root` | `compound` |  | Root provider that manages open/close state. Exported from Drawer. |
+| `Sheet.Trigger` | `compound` |  | Element that opens the sheet. |
+| `Sheet.Portal` | `compound` |  | Portals the overlay and content into the document body. |
+| `Sheet.Overlay` | `compound` |  | Dimmed backdrop rendered behind the sheet. |
+| `Sheet.Content` | `compound` |  | The sheet panel. Accepts a side prop. |
+| `scrollLock` | `'style' \| 'class'` |  | On Sheet.Root. How page scroll is locked while open. `class` adds a class from @nexub/themes/base instead of injecting a <style> tag, so it works under a strict CSP (style-src 'self'). Default `style`. |
+| `side` | `'left' \| 'right' \| 'top' \| 'bottom'` |  | Edge of the screen from which the sheet slides in. |
+| `Sheet.Header` | `compound` |  | Header section of the sheet panel. |
+| `Sheet.Footer` | `compound` |  | Footer section of the sheet panel. |
+| `Sheet.Title` | `compound` |  | Accessible title for the sheet. |
+| `Sheet.Description` | `compound` |  | Supporting description text for the sheet. |
+| `Sheet.Close` | `compound` |  | Element that closes the sheet. |
+
+## Example: Default
+
+```tsx
+<Sheet.Root>
+  <Sheet.Trigger asChild>
+    <Button variant="outline">Open sheet</Button>
+  </Sheet.Trigger>
+  <Sheet.Portal>
+    <Sheet.Overlay />
+    <Sheet.Content side="right">
+      <Sheet.Header>
+        <Sheet.Title>Notifications</Sheet.Title>
+        <Sheet.Description>Review your latest activity.</Sheet.Description>
+      </Sheet.Header>
+      <div style={{ padding: '16px', flex: 1 }}>
+        <Text size="body-sm" tone="secondary">No new notifications.</Text>
+      </div>
+      <Sheet.Footer>
+        <Sheet.Close asChild>
+          <Button variant="outline">Close</Button>
+        </Sheet.Close>
+      </Sheet.Footer>
+    </Sheet.Content>
+  </Sheet.Portal>
+</Sheet.Root>
+```

package/dist/skill/references/components/skeleton.md

@@ -0,0 +1,38 @@
+# Skeleton
+
+Placeholder loading animation that mimics content layout.
+
+- Package: `@nexub/react` · Category: Loading States · Status: stable
+- Import: `import { Skeleton } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/skeleton
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `shape` | `'line' \| 'rect' \| 'circle'` | `'line'` | Shape of the skeleton placeholder. |
+| `width` | `string \| number` |  | Width of the skeleton element. |
+| `height` | `string \| number` |  | Height of the skeleton element. |
+| `animated` | `boolean` | `true` | Enables the shimmer animation. |
+
+## Example: Default
+
+```tsx
+<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', width: '280px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
+  <Skeleton shape="circle" width={40} height={40} />
+  <Skeleton shape="line" width="60%" height={12} />
+  <Skeleton shape="line" width="100%" height={12} />
+  <Skeleton shape="line" width="80%" height={12} />
+  <Skeleton shape="rect" width="100%" height={80} />
+</div>
+```
+
+## Example: Shapes
+
+```tsx
+<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+  <Skeleton shape="line" width={120} height={12} />
+  <Skeleton shape="rect" width={80} height={60} />
+  <Skeleton shape="circle" width={40} height={40} />
+</div>
+```

package/dist/skill/references/components/slider.md

@@ -0,0 +1,31 @@
+# Slider
+
+Range slider built on Radix UI Slider.
+
+- Package: `@nexub/react` · Category: Interactive · Status: stable
+- Import: `import { Slider } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/slider
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `number[]` |  | The controlled value of the slider. |
+| `defaultValue` | `number[]` |  | The initial value when uncontrolled. |
+| `min` | `number` |  | The minimum value of the slider. |
+| `max` | `number` |  | The maximum value of the slider. |
+| `step` | `number` |  | The step increment between values. |
+| `disabled` | `boolean` |  | Disables slider interaction when true. |
+| `onValueChange` | `(value: number[]) => void` |  | Callback fired when the value changes. |
+
+## Example: Default
+
+```tsx
+<Slider defaultValue={[50]} min={0} max={100} style={{ width: '240px' }} />
+```
+
+## Example: Range
+
+```tsx
+<Slider defaultValue={[20, 80]} min={0} max={100} style={{ width: '240px' }} />
+```

package/dist/skill/references/components/spinner.md

@@ -0,0 +1,32 @@
+# Spinner
+
+Animated loading indicator. Inherits color from context.
+
+- Package: `@nexub/react` · Category: Feedback · Status: stable
+- Import: `import { Spinner } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/spinner
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Diameter of the spinner. |
+| `label` | `string` | `'Loading…'` | Screen-reader accessible label. |
+
+## Example: Sizes
+
+```tsx
+<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+  <Spinner size="xs" />
+  <Spinner size="sm" />
+  <Spinner size="md" />
+  <Spinner size="lg" />
+  <Spinner size="xl" />
+</div>
+```
+
+## Example: Inside button
+
+```tsx
+<Button loading>Saving…</Button>
+```

package/dist/skill/references/components/split-button.md

@@ -0,0 +1,43 @@
+# Split Button
+
+A primary action with related secondary actions behind a chevron, as one connected control.
+
+- Package: `@nexub/react` · Category: Actions · Status: beta
+- Import: `import { SplitButton } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/split-button
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `menuLabel` (required) | `string` |  | Accessible name of the menu toggle, e.g. "More save options". |
+| `menu` (required) | `ReactNode` |  | `DropdownMenu.Item`s for the secondary actions. |
+| `align` | `'start' \| 'end'` | `'end'` | Menu alignment against the toggle. |
+| `variant / size / tone` | `Button props` |  | Applied to both halves. |
+
+## Example: Default
+
+```tsx
+<SplitButton
+  onClick={save}
+  menuLabel="More save options"
+  menu={
+    <>
+      <DropdownMenu.Item>Save as draft</DropdownMenu.Item>
+      <DropdownMenu.Item>Save a copy</DropdownMenu.Item>
+    </>
+  }
+>
+  Save
+</SplitButton>
+```
+
+## Example: Outlined
+
+```tsx
+<SplitButton variant="outlined" menuLabel="More export options" menu={<DropdownMenu.Item>CSV</DropdownMenu.Item>}>
+  Export
+</SplitButton>
+```
+
+Related: [button](button.md), [button-group](button-group.md), [dropdown-menu](dropdown-menu.md)

package/dist/skill/references/components/stack.md

@@ -0,0 +1,35 @@
+# Stack
+
+Vertical stack layout with configurable gap.
+
+- Package: `@nexub/react` · Category: Layout · Status: stable
+- Import: `import { Stack } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/stack
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `gap` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Spacing between child elements. |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch'` |  | Cross-axis alignment of children. |
+| `dividers` | `boolean` |  | Renders a divider line between each child element. |
+
+## Example: Default
+
+```tsx
+<Stack gap="md">
+  <Button variant="outline">Item 1</Button>
+  <Button variant="outline">Item 2</Button>
+  <Button variant="outline">Item 3</Button>
+</Stack>
+```
+
+## Example: With dividers
+
+```tsx
+<Stack gap="md" dividers>
+  <Text>First section</Text>
+  <Text>Second section</Text>
+  <Text>Third section</Text>
+</Stack>
+```

package/dist/skill/references/components/stat-card.md

@@ -0,0 +1,49 @@
+# StatCard
+
+Metric display card showing a KPI value, label, optional delta, and icon.
+
+- Package: `@nexub/patterns` · Category: Data · Status: stable
+- Import: `import { StatCard } from '@nexub/patterns';`
+- Docs: https://nexub-ds-docs.pages.dev/patterns/stat-card
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` (required) | `string` |  | Metric name label. |
+| `value` (required) | `React.ReactNode` |  | Primary metric value. |
+| `delta` | `string` |  | Change value (e.g. "+12.5%"). |
+| `deltaType` | `'increase' \| 'decrease' \| 'neutral'` |  | Semantic direction of the delta. |
+| `icon` | `React.ReactNode` |  | Icon displayed in the card header. |
+| `description` | `string` |  | Additional context below the value. |
+| `animate` | `boolean` | `false` | Roll the digits when a number or string `value` changes (NumberTicker), announced politely. The first render never animates. |
+
+## Example: Default
+
+```tsx
+<StatCard
+  label="Total Revenue"
+  value="$48,295"
+  delta="+12.5%"
+  deltaType="increase"
+  description="vs last month"
+/>
+```
+
+## Example: With icon
+
+```tsx
+<StatCard
+  label="Active Users"
+  value="2,841"
+  delta="-3.2%"
+  deltaType="decrease"
+  icon={<Users size={20} />}
+/>
+```
+
+## Example: Animated
+
+```tsx
+<StatCard label="Orders today" value={orders.toLocaleString()} animate />
+```

package/dist/skill/references/components/status-pill.md

@@ -0,0 +1,37 @@
+# Status Pill
+
+> **Deprecated.** Do not use in new code. Deprecated — use Badge. A pill indicator for status values like active, pending, error.
+
+- Package: `@nexub/react` · Category: Labels & Badges · Status: deprecated
+- Import: `import { StatusPill } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/status-pill
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` (required) | `string` |  | Text displayed inside the pill. |
+| `tone` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Semantic colour tone of the pill. |
+| `dot` | `boolean` | `false` | Renders a small status dot before the label. Pulses automatically for success and info tones. |
+
+## Example: Default
+
+```tsx
+<div style={{ display: 'flex', gap: '8px' }}>
+  <StatusPill tone="success" label="Active" />
+  <StatusPill tone="warning" label="Pending" />
+  <StatusPill tone="danger" label="Error" />
+  <StatusPill tone="neutral" label="Draft" />
+  <StatusPill tone="info" label="Syncing" />
+</div>
+```
+
+## Example: With dot
+
+```tsx
+<div style={{ display: 'flex', gap: '8px' }}>
+  <StatusPill tone="success" dot label="Live" />
+  <StatusPill tone="info" dot label="Syncing" />
+  <StatusPill tone="warning" dot label="Degraded" />
+</div>
+```

package/dist/skill/references/components/step-indicator.md

@@ -0,0 +1,29 @@
+# StepIndicator
+
+Visual progress indicator for multi-step flows like onboarding or checkout.
+
+- Package: `@nexub/patterns` · Category: Navigation · Status: stable
+- Import: `import { StepIndicator } from '@nexub/patterns';`
+- Docs: https://nexub-ds-docs.pages.dev/patterns/step-indicator
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `steps` (required) | `StepIndicatorStep[]` |  | Array of step definitions. |
+| `currentStep` (required) | `number` |  | Zero-based index of the active step. |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction. |
+
+## Example: Default
+
+```tsx
+<StepIndicator
+  currentStep={1}
+  steps={[
+    { label: 'Account' },
+    { label: 'Profile' },
+    { label: 'Payment' },
+    { label: 'Review' },
+  ]}
+/>
+```

package/dist/skill/references/components/streaming-text.md

@@ -0,0 +1,53 @@
+# Streaming Text
+
+Assistant text as it arrives: new chunks fade in, text already shown stays still, and a caret marks the end.
+
+- Package: `@nexub/react` · Category: AI · Status: beta
+- Import: `import { StreamingText } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/streaming-text
+
+## When to use
+
+- Any model output rendered token by token.
+
+## When not to use
+
+- Finished text loaded from history: render it as plain text, or with `streaming={false}`.
+- Model output as HTML or Markdown HTML: StreamingText renders text only. Parse Markdown to React elements yourself; never inject model HTML.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `text` (required) | `string` |  | The full text received so far. Append to it; anything that is not an append renders statically. |
+| `streaming` | `boolean` | `false` | Shows the caret and sets `aria-busy` while more text is expected. |
+| `as` | `'div' \| 'p' \| 'span'` | `'div'` | Element to render. |
+| `aria-live` | `'off' \| 'polite'` | `'off'` | Opt-in live announcements. Leave off: screen readers would re-read the region on every token. |
+
+## Example: Streaming a reply
+
+Words arrive on a timer. Restart streams the paragraph again.
+
+```tsx
+const reply = 'Tokens arrive a few characters at a time. Each new chunk fades in while the text before it stays put, so the eye can keep reading.';
+const [length, setLength] = React.useState(0);
+const streaming = length < reply.length;
+
+React.useEffect(() => {
+  if (!streaming) return;
+  const id = setTimeout(() => setLength((n) => Math.min(reply.length, n + 6)), 60);
+  return () => clearTimeout(id);
+}, [length, streaming]);
+
+<StreamingText as="p" text={reply.slice(0, length)} streaming={streaming} />
+<Button variant="outline" size="sm" onClick={() => setLength(0)}>Restart</Button>
+```
+
+## Accessibility
+
+- Not a live region by default. Announce the finished message once instead, e.g. through a polite status or Conversation’s `announce` for whole messages.
+- `aria-busy` is true while streaming, so assistive tech can wait for the final text.
+- The caret is decorative (`aria-hidden`). With reduced motion, chunks appear without fading and the caret does not blink.
+- Only the last three chunks keep their own span, so the DOM stays flat however long the reply gets.
+
+Related: [message-bubble](message-bubble.md), [thinking-indicator](thinking-indicator.md), [conversation](conversation.md)

package/dist/skill/references/components/switch.md

@@ -0,0 +1,36 @@
+# Switch
+
+Toggle control for binary on/off settings. Built on Radix UI Switch.
+
+- Package: `@nexub/react` · Category: Form Controls · Status: stable
+- Import: `import { Switch } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/switch
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `checked` | `boolean` |  | Controlled checked state. |
+| `defaultChecked` | `boolean` | `false` | Uncontrolled initial state. |
+| `onCheckedChange` | `(checked: boolean) => void` |  | Callback when checked state changes. |
+| `disabled` | `boolean` | `false` | Disables interaction. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Switch size. |
+
+## Example: Default
+
+```tsx
+<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+  <Switch id="airplane" />
+  <Label htmlFor="airplane">Airplane mode</Label>
+</div>
+```
+
+## Example: Sizes
+
+```tsx
+<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+  <Switch size="sm" />
+  <Switch size="md" />
+  <Switch size="lg" />
+</div>
+```

package/dist/skill/references/components/table.md

@@ -0,0 +1,89 @@
+# Table
+
+Semantic HTML table with styled variants.
+
+- Package: `@nexub/react` · Category: Data Display · Status: stable
+- Import: `import { Table } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/table
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `Table.Root striped` | `boolean` | `false` | Applies alternating row background colours. |
+| `Table.Root bordered` | `boolean` | `false` | Adds borders between rows and columns. |
+| `Table.Root hoverable` | `boolean` | `false` | Highlights rows on mouse hover. |
+| `Table.Root stickyHeader` | `boolean` | `false` | Fixes the table header to the top when scrolling inside a scrollable container. |
+| `Table.Head align` | `'start' \| 'center' \| 'end'` | `'start'` | Text alignment within the header cell. |
+| `Table.Cell align` | `'start' \| 'center' \| 'end'` | `'start'` | Text alignment within the data cell. |
+| `Table.Caption side` | `'top' \| 'bottom'` | `'bottom'` | Whether the caption appears above or below the table. |
+
+## Example: Default
+
+```tsx
+<Table.Root>
+  <Table.Header>
+    <Table.Row>
+      <Table.Head>Name</Table.Head>
+      <Table.Head>Status</Table.Head>
+      <Table.Head>Date</Table.Head>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>Alice Johnson</Table.Cell>
+      <Table.Cell><StatusPill tone="success" label="Active" /></Table.Cell>
+      <Table.Cell>12 Jan 2026</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>Bob Martinez</Table.Cell>
+      <Table.Cell><StatusPill tone="warning" label="Pending" /></Table.Cell>
+      <Table.Cell>18 Feb 2026</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>Carol Smith</Table.Cell>
+      <Table.Cell><StatusPill tone="neutral" label="Inactive" /></Table.Cell>
+      <Table.Cell>03 Mar 2026</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table.Root>
+```
+
+## Example: With caption
+
+```tsx
+<Table.Root>
+  <Table.Caption>Recent user activity — last 30 days</Table.Caption>
+  <Table.Header>
+    <Table.Row>
+      <Table.Head>Name</Table.Head>
+      <Table.Head>Status</Table.Head>
+      <Table.Head>Date</Table.Head>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>Alice Johnson</Table.Cell>
+      <Table.Cell><StatusPill tone="success" label="Active" /></Table.Cell>
+      <Table.Cell>12 Jan 2026</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>Bob Martinez</Table.Cell>
+      <Table.Cell><StatusPill tone="warning" label="Pending" /></Table.Cell>
+      <Table.Cell>18 Feb 2026</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>Carol Smith</Table.Cell>
+      <Table.Cell><StatusPill tone="neutral" label="Inactive" /></Table.Cell>
+      <Table.Cell>03 Mar 2026</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+  <Table.Footer>
+    <Table.Row>
+      <Table.Cell colSpan={3} style={{ color: 'var(--color-text-secondary)', fontSize: '0.875rem' }}>
+        Showing 3 of 3 users
+      </Table.Cell>
+    </Table.Row>
+  </Table.Footer>
+</Table.Root>
+```

package/dist/skill/references/components/tabs.md

@@ -0,0 +1,51 @@
+# Tabs
+
+Layered content panels switched by tab triggers. Built on Radix UI Tabs.
+
+- Package: `@nexub/react` · Category: Navigation · Status: stable
+- Import: `import { Tabs } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/tabs
+
+## When to use
+
+- Switching between related views within the same page context
+- Organising content that belongs to the same entity
+- Reducing visual clutter by hiding secondary content behind tabs
+- Horizontal navigation within a bounded section
+
+## When not to use
+
+- Global site navigation — use the sidebar or top nav
+- Sequential steps in order — use StepIndicator
+- Comparing content side-by-side — keep both views visible
+- More than 5–7 tabs — consider a Select or sub-navigation
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `defaultValue` | `string` |  | Initially active tab value (uncontrolled). |
+| `value` | `string` |  | Controlled active tab value. |
+| `onValueChange` | `(value: string) => void` |  | Callback when active tab changes. |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction of the tab list. |
+
+## Example: Default
+
+```tsx
+<Tabs.Root defaultValue="account">
+  <Tabs.List>
+    <Tabs.Trigger value="account">Account</Tabs.Trigger>
+    <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
+    <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
+  </Tabs.List>
+  <Tabs.Content value="account">
+    <Text>Account settings content.</Text>
+  </Tabs.Content>
+  <Tabs.Content value="billing">
+    <Text>Billing details content.</Text>
+  </Tabs.Content>
+  <Tabs.Content value="notifications">
+    <Text>Notification preferences content.</Text>
+  </Tabs.Content>
+</Tabs.Root>
+```

package/dist/skill/references/components/tag.md

@@ -0,0 +1,25 @@
+# Tag
+
+> **Deprecated.** Do not use in new code. Deprecated — use Badge. Non-interactive label tag for categorisation.
+
+- Package: `@nexub/react` · Category: Labels & Badges · Status: deprecated
+- Import: `import { Tag } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/tag
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `variant` | `'solid' \| 'soft' \| 'outline'` | `'soft'` | Visual style of the tag. |
+| `tone` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  | Semantic colour tone of the tag. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Controls tag size. |
+
+## Example: Default
+
+```tsx
+<div style={{ display: 'flex', gap: '8px' }}>
+  <Tag>Frontend</Tag>
+  <Tag tone="info">Backend</Tag>
+  <Tag tone="success">Deployed</Tag>
+</div>
+```

package/dist/skill/references/components/text-gradient.md

@@ -0,0 +1,30 @@
+# Text Gradient
+
+Renders text with a brand gradient fill.
+
+- Package: `@nexub/react` · Category: Inline Primitives · Status: stable
+- Import: `import { TextGradient } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/text-gradient
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `from` | `string` |  | Starting color of the gradient (CSS color value or token). |
+| `to` | `string` |  | Ending color of the gradient (CSS color value or token). |
+| `direction` | `'to-r' \| 'to-br' \| 'to-b'` |  | Direction of the gradient. |
+
+## Example: Default
+
+```tsx
+<TextGradient>Design system for ambitious teams</TextGradient>
+```
+
+## Example: In heading
+
+```tsx
+<Heading size="h1">
+  Build with{' '}
+  <TextGradient>Nexub</TextGradient>
+</Heading>
+```