Skip to content

GNOME UI

Component Gallery

ElJijuna/gnome-ui

Component Gallery¶

Every component that ships on at least one platform, one live demo per platform it's actually available on, switched by the tabs — React and Web Components embed their real, already-deployed Storybook story; React Native has no web-viewable Storybook (it's a mobile/Expo app, not a browser target), so its tab shows only the usage snippet, verified on a real Simulator instead. Code blocks are syntax-highlighted with the same GNOME/Adwaita palette as the rest of this site.

This page is generated by scripts/generate-component-gallery.mjs from each package's own README/story files — re-run it after shipping a new component rather than hand-editing this file.

AboutDialog¶

gnome-ui.org/react — AboutDialog

import { AboutDialog } from '@gnome-ui/react';

<AboutDialog />

Full docs & controls →

ActionRow¶

gnome-ui.org/react — ActionRow

import { ActionRow } from '@gnome-ui/react';

<ActionRow />

Full docs & controls →

import { ActionRow } from '@gnome-ui/react-native';

<ActionRow />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — ActionRow

<gnome-action-row>
  <span data-slot="row-prefix">🔔</span>
  <span data-slot="row-title">Notifications</span>
  <span data-slot="row-subtitle">Manage app alerts</span>
  <span data-slot="row-suffix">
    <input type="checkbox" role="switch" aria-label="Notifications" checked />
  </span>
</gnome-action-row>

<!-- Interactive: composes a real <button data-slot="row-surface"> -->
<gnome-action-row interactive aria-label="Open Wi-Fi settings">
  <span data-slot="row-title">Wi-Fi</span>
  <span data-slot="row-subtitle">Home Network</span>
</gnome-action-row>

<script type="module">
  document.querySelector('gnome-action-row[interactive]').addEventListener('gnome-activate', () => {
    // Navigate or open a dialog.
  });
</script>

Full docs & controls →

AffectedPackage¶

gnome-ui.org/react — AffectedPackage

import { AffectedPackage } from "@gnome-ui/react";

<AffectedPackage
  ecosystem="npm"
  name="lodash"
  version="4.17.20"
  fixedVersion="4.17.21"
/>

Full docs & controls →

AnimatedIcon¶

gnome-ui.org/react — AnimatedIcon

import { AnimatedIcon } from "@gnome-ui/react";
import { Syncing } from "@gnome-ui/icons";

<AnimatedIcon icon={Syncing} playing={isSyncing} label="Syncing" />

Full docs & controls →

import { Syncing } from '@gnome-ui/icons';
import { AnimatedIcon } from '@gnome-ui/react-native';

<AnimatedIcon icon={Syncing} playing={isSyncing} label="Syncing" />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Avatar¶

gnome-ui.org/react — Avatar

import { Avatar } from '@gnome-ui/react';

<Avatar />

Full docs & controls →

import { Avatar } from '@gnome-ui/react-native';

<Avatar name="Grace Hopper" size="lg" />
<Avatar src="https://example.com/alice.jpg" alt="Alice's profile photo" />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Avatar

<gnome-avatar name="Ada Lovelace" size="lg">
  <img data-slot="avatar-image" src="/ada.jpg" />
</gnome-avatar>

<!-- No image (or a broken one): shows initials derived from name -->
<gnome-avatar name="Grace Hopper"></gnome-avatar>

Full docs & controls →

AvatarGroup¶

gnome-ui.org/react — AvatarGroup

import { AvatarGroup } from '@gnome-ui/react';

<AvatarGroup />

Full docs & controls →

import { AvatarGroup } from '@gnome-ui/react-native';

<AvatarGroup
  avatars={[{ name: 'Alice Martin' }, { name: 'Bob Smith' }, { name: 'Carol White' }]}
  max={5}
/>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

AvatarRotator¶

gnome-ui.org/react — AvatarRotator

import { AvatarRotator } from '@gnome-ui/react';

<AvatarRotator />

Full docs & controls →

import { AvatarRotator } from '@gnome-ui/react-native';

<AvatarRotator name="Alice Martin" avatars={[url1, url2, url3]} />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Badge¶

gnome-ui.org/react — Badge

import { Badge } from '@gnome-ui/react';

<Badge />

Full docs & controls →

import { Avatar, Badge } from '@gnome-ui/react-native';

<Badge variant="error" anchor={<Avatar name="Alice Bob" />}>3</Badge>
<Badge dot variant="success" />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Badge

<gnome-badge>3</gnome-badge>
<gnome-badge variant="success">12</gnome-badge>
<gnome-badge dot variant="error"></gnome-badge>

<!-- Anchored over another element: the consumer's own wrapper must be
     position: relative (or similar) — the badge only knows about itself. -->
<span style="position: relative; display: inline-flex;">
  <gnome-icon-button aria-label="Notifications">🔔</gnome-icon-button>
  <gnome-badge anchored variant="error">3</gnome-badge>
</span>

Full docs & controls →

gnome-ui.org/react — Banner

import { Banner } from '@gnome-ui/react';

<Banner />

Full docs & controls →

import { Banner } from '@gnome-ui/react-native';

<Banner variant="info">A new version is available.</Banner>;
<Banner variant="error" actionLabel="Retry" onAction={() => {}}>
  Sync failed
</Banner>;
<Banner variant="success" dismissible onDismiss={() => {}}>
  Changes saved successfully.
</Banner>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Banner

<gnome-banner variant="warning">
  <span data-slot="banner-message">Your session will expire in 5 minutes.</span>
  <span data-slot="banner-actions">
    <button type="button" data-action="extend">Extend session</button>
    <button type="button" data-dismiss aria-label="Dismiss">×</button>
  </span>
</gnome-banner>

<script type="module">
  document.querySelector('gnome-banner').addEventListener('gnome-action', (event) => {
    if (event.detail.action === 'extend') {
      // Extend the session.
    }
  });
</script>

Full docs & controls →

Bin¶

gnome-ui.org/react — Bin

import { Bin } from '@gnome-ui/react';

<Bin />

Full docs & controls →

import { Bin } from '@gnome-ui/react-native';

<Bin style={{ maxWidth: 480 }}>
  <ExpensiveChart data={series} />
</Bin>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Blockquote¶

gnome-ui.org/react — Blockquote

import { Blockquote } from '@gnome-ui/react';

<Blockquote />

Full docs & controls →

import { Blockquote } from '@gnome-ui/react-native';

<Blockquote variant="info" cite="Ada Lovelace, 1842">
  The Analytical Engine has no pretensions to originate anything.
</Blockquote>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

BottomSheet¶

gnome-ui.org/react — BottomSheet

import { BottomSheet } from '@gnome-ui/react';

<BottomSheet />

Full docs & controls →

import { BottomSheet, Button } from '@gnome-ui/react-native';

<Button onPress={() => setOpen(true)}>Open</Button>
<BottomSheet open={open} title="Options" onClose={() => setOpen(false)}>
  <Text>Rich content here</Text>
</BottomSheet>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

BottomTabBar¶

import { BottomTabBar } from '@gnome-ui/react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const insets = useSafeAreaInsets();

<BottomTabBar
  items={[
    { value: 'home', label: 'Home', icon: HomeOutline, activeIcon: HomeFilled },
    { value: 'search', label: 'Search', icon: Search },
    { value: 'profile', label: 'Profile', icon: Person, badge: true },
  ]}
  value={tab}
  onChange={setTab}
  bottomInset={insets.bottom}
/>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Box¶

import { Box } from '@gnome-ui/react';

<Box />

Live demo unavailable — couldn't find a deployed Storybook story for this component.

import { Box } from '@gnome-ui/react-native';

// Vertical section (heading + content)
<Box spacing={12}>
  <Text variant="caption-heading" color="dim">Devices</Text>
  <BoxedList>{/* … */}</BoxedList>
</Box>

// Horizontal icon + label
<Box orientation="horizontal" spacing={6} align="center">
  <Icon icon={Folder} size="sm" />
  <Text>Documents</Text>
</Box>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

BoxedList¶

gnome-ui.org/react — BoxedList

import { BoxedList } from '@gnome-ui/react';

<BoxedList />

Full docs & controls →

import { BoxedList } from '@gnome-ui/react-native';

<BoxedList />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — BoxedList

<gnome-boxed-list>
  <gnome-action-row>
    <span data-slot="row-title">Wi-Fi</span>
    <span data-slot="row-subtitle">Home Network</span>
    <span data-slot="row-suffix">
      <input type="checkbox" role="switch" aria-label="Wi-Fi" checked />
    </span>
  </gnome-action-row>
  <gnome-action-row>
    <span data-slot="row-title">Bluetooth</span>
    <span data-slot="row-subtitle">Off</span>
    <span data-slot="row-suffix">
      <input type="checkbox" role="switch" aria-label="Bluetooth" />
    </span>
  </gnome-action-row>
</gnome-boxed-list>

Full docs & controls →

BreakpointBin¶

gnome-ui.org/react — BreakpointBin

import { BreakpointBin } from '@gnome-ui/react';

<BreakpointBin />

Full docs & controls →

import { BreakpointBin } from '@gnome-ui/react-native';

<BreakpointBin breakpoints={[{ name: 'compact', maxWidth: 400 }]}>
  {({ activeBreakpoint }) =>
    activeBreakpoint === 'compact' ? <CompactCard /> : <WideCard />
  }
</BreakpointBin>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Button¶

gnome-ui.org/react — Button

import { Button } from '@gnome-ui/react';

<Button />

Full docs & controls →

import { Button } from '@gnome-ui/react-native';

<Button variant="suggested" onPress={() => save()}>
  Save
</Button>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Button

<gnome-button variant="suggested" size="md">
  <button
    type="submit"
    name="intent"
    value="save"
    data-slot="button-control"
    hx-post="/settings"
  >
    Save changes
  </button>
</gnome-button>

Full docs & controls →

ButtonContent¶

gnome-ui.org/react — ButtonContent

import { ButtonContent } from '@gnome-ui/react';

<ButtonContent />

Full docs & controls →

import { ButtonContent, Icon } from '@gnome-ui/react-native';
import { Save } from '@gnome-ui/icons';

<Pressable onPress={save}>
  <ButtonContent icon={<Icon icon={Save} size="sm" />} label="Save" color="accent" />
</Pressable>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

ButtonRow¶

gnome-ui.org/react — ButtonRow

import { ButtonRow } from '@gnome-ui/react';

<ButtonRow />

Full docs & controls →

import { BoxedList, ButtonRow } from '@gnome-ui/react-native';

<BoxedList>
  <ButtonRow title="Save changes" variant="suggested" onPress={handleSave} />
  <ButtonRow title="Delete account" variant="destructive" onPress={handleDelete} />
</BoxedList>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Calendar¶

gnome-ui.org/react — Calendar

<Calendar defaultView="years" max={new Date()} onViewChange={(view) => console.log(view)} />

Full docs & controls →

CalendarRange¶

gnome-ui.org/react — CalendarRange

import { CalendarRange } from '@gnome-ui/react/components/CalendarRange';

function Example() {
  const [range, setRange] = useState<DateRange>({ start: null, end: null });
  return <CalendarRange value={range} onChange={setRange} />;
}

Full docs & controls →

Callout¶

gnome-ui.org/react — Callout

import { Callout } from '@gnome-ui/react';

<Callout>Changes are saved automatically.</Callout>
<Callout variant="warning">This action can't be undone.</Callout>
<Callout variant="tip">Press Ctrl+K to open the command palette.</Callout>

Full docs & controls →

import { Callout } from '@gnome-ui/react-native';

<Callout variant="tip" dismissible onDismiss={() => setVisible(false)}>
  Press and hold a row to reveal more actions.
</Callout>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Callout

<gnome-callout variant="warning">
  <svg data-slot="callout-icon" width="16" height="16" aria-hidden="true">…</svg>
  <span>Double-check this value before continuing.</span>
  <button type="button" data-dismiss aria-label="Dismiss">×</button>
</gnome-callout>

<script type="module">
  document.querySelector('gnome-callout').addEventListener('gnome-dismiss', () => {
    // You decide what happens next — hide it, remove it, etc.
  });
</script>

Full docs & controls →

Card¶

gnome-ui.org/react — Card

import { Card } from '@gnome-ui/react';

<Card />

Full docs & controls →

gnome-ui.org/web-components — Card

<gnome-card padding="md">
  <strong>Card title</strong>
  <p>Static content grouped on an elevated surface.</p>
</gnome-card>

<!-- Interactive: composes a real <button data-slot="card-surface"> -->
<gnome-card interactive aria-label="Open settings">
  <strong>Settings</strong>
  <p>Manage your account and preferences.</p>
</gnome-card>

Full docs & controls →

Carousel¶

gnome-ui.org/react — Carousel

<Carousel visibleSlides={{ base: 3, wide: 2, narrow: 1 }} peek={{ base: 32, narrow: 0 }} />

Full docs & controls →

Checkbox¶

gnome-ui.org/react — Checkbox

import { Checkbox } from '@gnome-ui/react';

<Checkbox />

Full docs & controls →

import { useState } from 'react';
import { Checkbox } from '@gnome-ui/react-native';

function TermsRow() {
  const [accepted, setAccepted] = useState(false);

  return (
    <Checkbox value={accepted} onValueChange={setAccepted} accessibilityLabel="Accept terms" />
  );
}

// "Select all" with a mixed group:
<Checkbox value={allSelected} indeterminate={someSelected && !allSelected} onValueChange={selectAll} />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Checkbox

<label>
  <gnome-checkbox>
    <input type="checkbox" data-slot="checkbox-control" />
  </gnome-checkbox>
  Select item
</label>

<script type="module">
  const checkbox = document.querySelector('gnome-checkbox');
  const control = checkbox.querySelector('input');

  control.addEventListener('change', () => {
    console.log('Selected:', control.checked);
  });

  // "Select all" pattern: apply indeterminate on the host, not the input.
  checkbox.indeterminate = true;
</script>

Full docs & controls →

CheckRow¶

gnome-ui.org/react — CheckRow

import { CheckRow } from '@gnome-ui/react';

<CheckRow />

Full docs & controls →

import { BoxedList, CheckRow } from '@gnome-ui/react-native';

<BoxedList>
  <CheckRow
    title="Wi-Fi"
    subtitle="Home Network"
    checked={wifi}
    onCheckedChange={setWifi}
  />
</BoxedList>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Chip¶

gnome-ui.org/react — Chip

import { Chip } from '@gnome-ui/react';

<Chip />

Full docs & controls →

import { Chip } from '@gnome-ui/react-native';

<Chip label="React" />
<Chip label="React" onRemove={() => {}} />
<Chip label="React" selectable selected={selected} onToggle={() => setSelected((s) => !s)} />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

ChoiceCardGroup¶

gnome-ui.org/react — ChoiceCardGroup

import { useState } from 'react';
import { ChoiceCardGroup } from '@gnome-ui/react';

const [plan, setPlan] = useState('personal');

<ChoiceCardGroup
  label="Account type"
  value={plan}
  onChange={setPlan}
  options={[
    { value: 'personal', title: 'Personal', description: 'For individual use' },
    { value: 'team', title: 'Team', description: 'For small groups' },
    { value: 'enterprise', title: 'Enterprise', description: 'Advanced controls and support' },
  ]}
/>

Full docs & controls →

gnome-ui.org/web-components — ChoiceCardGroup

<gnome-choice-card-group label="Account type" helper-text="You can change this later.">
  <button type="button" role="radio" aria-checked="true" data-value="personal">
    <span data-slot="choice-card-title">Personal</span>
    <span data-slot="choice-card-description">For individual use</span>
  </button>
  <button type="button" role="radio" aria-checked="false" data-value="team">
    <span data-slot="choice-card-title">Team</span>
    <span data-slot="choice-card-description">For small groups</span>
  </button>
</gnome-choice-card-group>

<script type="module">
  const group = document.querySelector('gnome-choice-card-group');

  group.addEventListener('click', (event) => {
    const card = event.target.closest('[role="radio"]');
    if (!card || card.disabled) return;

    for (const sibling of group.querySelectorAll('[role="radio"]')) {
      sibling.setAttribute('aria-checked', String(sibling === card));
    }
  });
</script>

Full docs & controls →

Clamp¶

gnome-ui.org/react — Clamp

import { Clamp } from '@gnome-ui/react';

<Clamp />

Full docs & controls →

import { Clamp } from '@gnome-ui/react-native';

<Clamp>
  <BoxedList>{/* … */}</BoxedList>
</Clamp>

<Clamp maximumSize={480} tighteningThreshold={0.9}>
  <Text>Never wider than 480 dp, and never edge-to-edge below it</Text>
</Clamp>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

CoachMark¶

gnome-ui.org/react — CoachMark

import { useRef, useState } from 'react';
import { CoachMark } from '@gnome-ui/react/components/CoachMark';

function Example() {
  const target = useRef<HTMLButtonElement>(null);
  const [open, setOpen] = useState(true);

  return (
    <>
      <button ref={target}>Sync</button>
      <CoachMark
        open={open}
        targetRef={target}
        title="Sync your files"
        description="Press this to keep every device up to date."
        primaryAction={{ label: 'Got it', onClick: () => setOpen(false) }}
        onDismiss={() => setOpen(false)}
      />
    </>
  );
}

Full docs & controls →

import { CoachMark, CoachMarkTour } from '@gnome-ui/react-native';

<CoachMark
  open={open}
  targetRef={target}
  title="Sync your files"
  description="Press this to keep every device up to date."
  primaryAction={{ label: 'Got it', onPress: () => setOpen(false) }}
  onDismiss={() => setOpen(false)}
/>

<CoachMarkTour
  open={running}
  steps={[
    { targetRef: searchRef, title: 'Search', description: 'Find anything fast.' },
    { targetRef: addRef, title: 'Add', description: 'Create a new item here.', placement: 'left' },
  ]}
  onFinish={() => setRunning(false)}
  onSkip={() => setRunning(false)}
/>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

CodeBlock¶

gnome-ui.org/react — CodeBlock

import { CodeBlock } from '@gnome-ui/react';

<CodeBlock
  filename="config.yaml"
  language="YAML"
  lineNumbers
  code={`server:\n  port: 8080\n  host: 0.0.0.0`}
/>

Full docs & controls →

ColorPicker¶

gnome-ui.org/react — ColorPicker

import { ColorPicker, GNOME_PALETTE } from "@gnome-ui/react";

const [color, setColor] = useState("#3584e4");

<ColorPicker value={color} onChange={setColor} />
<ColorPicker value={color} onChange={setColor} allowCustom />

Full docs & controls →

import { ColorPicker, ColorSwatch, GNOME_PALETTE } from '@gnome-ui/react-native';

const [color, setColor] = useState('#3584e4');

<ColorPicker value={color} onChange={setColor} />

// Custom colors, with your own picker behind the "+"
<ColorPicker
  value={color}
  onChange={setColor}
  allowCustom
  onRequestCustom={() => setPickerOpen(true)}
/>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

ColumnView¶

gnome-ui.org/react — ColumnView

import { ColumnView } from '@gnome-ui/react';

<ColumnView />

Full docs & controls →

ComboRow¶

gnome-ui.org/react — ComboRow

import { ComboRow } from '@gnome-ui/react';

<ComboRow />

Full docs & controls →

import { ComboRow } from '@gnome-ui/react-native';

<BoxedList>
  <ComboRow
    title="Language"
    subtitle="Used across the whole app"
    value={language}
    onValueChange={setLanguage}
    options={[
      { value: 'en', label: 'English' },
      { value: 'es', label: 'Español' },
    ]}
  />
</BoxedList>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — ComboRow

<gnome-combo-row>
  <span data-slot="row-title">Theme</span>
  <span data-slot="row-subtitle">Choose your preferred color scheme</span>

  <gnome-dropdown data-slot="row-suffix" value="dark">
    <button type="button" data-slot="dropdown-trigger"></button>
    <ul data-slot="dropdown-content">
      <li data-option data-value="light">Light</li>
      <li data-option data-value="dark">Dark</li>
    </ul>
  </gnome-dropdown>
</gnome-combo-row>

Full docs & controls →

ContributionGraph¶

gnome-ui.org/react — ContributionGraph

import { ContributionGraph } from '@gnome-ui/react';

<ContributionGraph />

Full docs & controls →

CopyButton¶

gnome-ui.org/react — CopyButton

import { CopyButton } from '@gnome-ui/react';

<CopyButton value="CVE-2024-3094" label="Copy CVE ID" />

Full docs & controls →

import { CopyButton } from '@gnome-ui/react-native';

<CopyButton value="CVE-2024-3094" />
<CopyButton value={installCommand} label="Copy install command" copiedLabel="Added to clipboard" />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — CopyButton

<gnome-copy-button value="CVE-2024-3094" label="Copy" copied-label="Copied!">
</gnome-copy-button>

<script type="module">
  const copyButton = document.querySelector('gnome-copy-button');

  copyButton.addEventListener('gnome-copied', (event) => {
    console.log('Copied:', event.detail.value);
  });

  copyButton.addEventListener('gnome-copy-error', (event) => {
    console.error('Copy failed:', event.detail.error);
  });
</script>

Full docs & controls →

CopyField¶

gnome-ui.org/react — CopyField

import { CopyField } from '@gnome-ui/react';

<CopyField label="API key" value="sk-live-4242424242424242" />
<CopyField label="Webhook URL" value="https://example.com/hooks/abc123" monospace={false} />

Full docs & controls →

CountDownTimer¶

gnome-ui.org/react — CountDownTimer

import { CountDownTimer } from '@gnome-ui/react';

<CountDownTimer />

Full docs & controls →

CveIdentifier¶

gnome-ui.org/react — CveIdentifier

import { CveIdentifier } from "@gnome-ui/react";

<CveIdentifier cveId="CVE-2024-3094" />
<CveIdentifier cveId="CVE-2024-3094" source="nvd" />
<CveIdentifier cveId="CVE-2024-3094" link={false} />

Full docs & controls →

CvssScore¶

gnome-ui.org/react — CvssScore

import { CvssScore } from "@gnome-ui/react";

<CvssScore score={9.8} />
<CvssScore score={0} severity="minimal" />

Full docs & controls →

CvssVector¶

gnome-ui.org/react — CvssVector

import { CvssVector } from "@gnome-ui/react";

<CvssVector vector="CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:H/A:H" />

Full docs & controls →

CweIdentifier¶

gnome-ui.org/react — CweIdentifier

import { CweIdentifier } from "@gnome-ui/react";

<CweIdentifier cweId="CWE-79" />

Full docs & controls →

DatePicker¶

gnome-ui.org/react — DatePicker

import { DatePicker } from '@gnome-ui/react/components/DatePicker';

function Example() {
  const [date, setDate] = useState<Date | null>(null);
  return <DatePicker label="Start date" value={date} onChange={setDate} />;
}

Full docs & controls →

DateRangePicker¶

gnome-ui.org/react — DateRangePicker

import { DateRangePicker } from '@gnome-ui/react/components/DateRangePicker';

function Example() {
  const [range, setRange] = useState<DateRange | null>(null);
  return <DateRangePicker label="Stay" value={range} onChange={setRange} />;
}

Full docs & controls →

Dialog¶

gnome-ui.org/react — Dialog

import { Dialog } from '@gnome-ui/react';

<Dialog />

Full docs & controls →

import { Dialog } from '@gnome-ui/react-native';

// Standard
<Dialog open={open} title="About Sync" onClose={() => setOpen(false)}>
  Files are synced automatically every 15 minutes.
</Dialog>;

// With buttons
<Dialog
  open={open}
  title="Discard changes?"
  onClose={() => setOpen(false)}
  buttons={[
    { label: 'Keep editing', onPress: () => setOpen(false) },
    { label: 'Discard', variant: 'destructive', onPress: () => setOpen(false) },
  ]}
>
  Your changes have not been saved.
</Dialog>;

// Alert — role="alertdialog" + responses/onResponse
<Dialog
  open={open}
  role="alertdialog"
  title="Delete file?"
  responses={[
    { id: 'cancel', label: 'Cancel' },
    { id: 'delete', label: 'Delete', variant: 'destructive' },
  ]}
  onResponse={(id) => setOpen(false)}
>
  This action cannot be undone.
</Dialog>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Dialog

<button id="delete-trigger" type="button">Delete</button>

<gnome-dialog id="delete-dialog" close-on-backdrop>
  <section data-slot="dialog-surface">
    <header data-slot="dialog-header">
      <h2 data-slot="dialog-title">Delete item?</h2>
      <p data-slot="dialog-description">This action cannot be undone.</p>
    </header>

    <div data-slot="dialog-actions">
      <button type="button" autofocus data-cancel>Cancel</button>
      <button type="button" data-confirm>Delete</button>
    </div>
  </section>
</gnome-dialog>

<script type="module">
  const dialog = document.querySelector('#delete-dialog');

  document.querySelector('#delete-trigger').addEventListener('click', () => {
    dialog.showModal();
  });

  dialog.querySelector('[data-cancel]').addEventListener('click', () => {
    dialog.close();
  });
</script>

Full docs & controls →

Divider¶

gnome-ui.org/react — Divider

import { Divider } from '@gnome-ui/react';

<Divider>OR</Divider>
<Divider>Continue with</Divider>
<Divider />

Full docs & controls →

import { Divider } from '@gnome-ui/react-native';

<Divider>OR</Divider>
<Divider>Continue with</Divider>
<Divider />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Drawer¶

gnome-ui.org/react — Drawer

import { Drawer } from '@gnome-ui/react';

<Drawer />

Full docs & controls →

import { Drawer } from '@gnome-ui/react-native';

<Drawer open={open} title="Details" onClose={() => setOpen(false)}>
  <Text>Drawer content can be any React node passed as children.</Text>
</Drawer>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/react — Dropdown

import { Dropdown } from '@gnome-ui/react';

<Dropdown />

Full docs & controls →

import { Dropdown } from '@gnome-ui/react-native';

<Dropdown
  options={[
    { value: 'blue', label: 'Blue' },
    { value: 'green', label: 'Green', description: 'A calm accent' },
  ]}
  value={accentColor}
  onChange={setAccentColor}
  placeholder="Accent color"
/>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Dropdown

<gnome-dropdown placeholder="Select a theme">
  <button type="button" data-slot="dropdown-trigger"></button>
  <ul data-slot="dropdown-content">
    <li data-option data-value="light">Light</li>
    <li data-option data-value="dark">Dark</li>
    <li data-option data-value="hc" aria-disabled="true">High contrast</li>
  </ul>
</gnome-dropdown>

<script type="module">
  document.querySelector('gnome-dropdown').addEventListener('gnome-change', (event) => {
    console.log('Selected:', event.detail.value);
  });
</script>

Full docs & controls →

EmojiPicker¶

gnome-ui.org/react — EmojiPicker

import { EmojiPicker, IconButton } from '@gnome-ui/react';
import { EmojiObjects } from '@gnome-ui/icons';

<EmojiPicker onSelect={(emoji) => console.log(emoji)}>
  <IconButton icon={EmojiObjects} label="Insert emoji" tooltip="Insert emoji" />
</EmojiPicker>

Full docs & controls →

EntryRow¶

gnome-ui.org/react — EntryRow

import { EntryRow } from '@gnome-ui/react';

<EntryRow />

Full docs & controls →

import { EntryRow } from '@gnome-ui/react-native';

const [name, setName] = useState('');

<BoxedList>
  <EntryRow title="Display name" value={name} onValueChange={setName} />
  <EntryRow
    title="Email"
    value={email}
    onValueChange={setEmail}
    keyboardType="email-address"
    leading={<Icon icon={MailRead} />}
    trailing={<IconButton icon={Delete} label="Clear" onPress={() => setEmail('')} />}
  />
</BoxedList>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Expander¶

gnome-ui.org/react — Expander

import { Expander } from '@gnome-ui/react';

<Expander label="Show advanced options">
  <TextField label="Custom endpoint" />
</Expander>

Full docs & controls →

import { Expander } from '@gnome-ui/react-native';

<Expander label="Show advanced options">
  <TextField label="Custom endpoint" />
</Expander>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Expander

<gnome-expander label="Show advanced options">
  <p>These settings are rarely needed — change them only if you know what you're doing.</p>
</gnome-expander>

<script type="module">
  document.querySelector('gnome-expander').addEventListener('gnome-open-change', (event) => {
    console.log('Expanded:', event.detail.open);
  });
</script>

Full docs & controls →

ExpanderRow¶

gnome-ui.org/react — ExpanderRow

import { ExpanderRow } from '@gnome-ui/react';

<ExpanderRow />

Full docs & controls →

import { ActionRow, BoxedList, ExpanderRow } from '@gnome-ui/react-native';

<BoxedList>
  <ExpanderRow title="Advanced" subtitle="Proxy, DNS, and MTU settings">
    <ActionRow title="Proxy" subtitle="Automatic" />
    <ActionRow title="DNS" subtitle="Automatic" />
  </ExpanderRow>
</BoxedList>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — ExpanderRow

<gnome-expander-row>
  <span data-slot="row-title">Advanced settings</span>
  <span data-slot="row-subtitle">Configure additional options</span>
  <span data-slot="row-suffix">Beta</span>

  <gnome-action-row>
    <span data-slot="row-title">Enable telemetry</span>
  </gnome-action-row>
  <gnome-action-row>
    <span data-slot="row-title">Hardware acceleration</span>
  </gnome-action-row>
</gnome-expander-row>

<script type="module">
  document.querySelector('gnome-expander-row').addEventListener('gnome-open-change', (event) => {
    console.log('Expanded:', event.detail.open);
  });
</script>

Full docs & controls →

FieldGroup¶

gnome-ui.org/react — FieldGroup

import { FieldGroup, RadioButton } from '@gnome-ui/react';

<FieldGroup label="Notification method" helperText="Choose how you want to be notified.">
  <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <RadioButton name="notify" value="email" /> Email
  </label>
  <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <RadioButton name="notify" value="sms" /> SMS
  </label>
</FieldGroup>

Full docs & controls →

import { FieldGroup, RadioButton } from '@gnome-ui/react-native';

<FieldGroup label="Notification method" helperText="Choose how you want to be notified.">
  <LabeledRadio label="Email" selected={method === 'email'} onSelect={() => setMethod('email')} />
  <LabeledRadio label="SMS" selected={method === 'sms'} onSelect={() => setMethod('sms')} />
</FieldGroup>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — FieldGroup

<gnome-field-group label="Notification method" helper-text="Choose how you want to be notified.">
  <label><input type="radio" name="notif" value="email" checked /> Email</label>
  <label><input type="radio" name="notif" value="sms" /> SMS</label>
  <label><input type="radio" name="notif" value="push" /> Push</label>
</gnome-field-group>

<!-- Error state: replaces helper-text, announced via role="alert" -->
<gnome-field-group label="Notification method" error="Select at least one notification method.">
  ...
</gnome-field-group>

Full docs & controls →

FileDropZone¶

gnome-ui.org/react — FileDropZone

import { FileDropZone } from '@gnome-ui/react';

<FileDropZone
  onFilesSelected={(files) => upload(files)}
  onError={(message) => showToast(message)}
  accept="image/*"
  maxSize={5 * 1024 * 1024}
  helperText="PNG or JPG, up to 5 MB"
/>

Full docs & controls →

gnome-ui.org/web-components — FileDropZone

<gnome-file-drop-zone accept="image/png,image/jpeg" max-size="2097152">
</gnome-file-drop-zone>

<script type="module">
  const zone = document.querySelector('gnome-file-drop-zone');

  zone.addEventListener('gnome-files-selected', (event) => {
    console.log('Accepted:', event.detail.files.map((f) => f.name));
  });

  zone.addEventListener('gnome-error', (event) => {
    console.error(event.detail.message);
  });
</script>

Full docs & controls →

FileTypeIcon¶

gnome-ui.org/react — FileTypeIcon

import { FileTypeIcon } from '@gnome-ui/react';

<FileTypeIcon name="report.pdf" />
<FileTypeIcon mimeType="image/png" />
<FileTypeIcon name="cover.jpg" thumbnail={thumbnailUrl} />
<FileTypeIcon isFolder />

Full docs & controls →

import { FileTypeIcon } from '@gnome-ui/react-native';

<FileTypeIcon name="report.pdf" />
<FileTypeIcon mimeType="image/png" />
<FileTypeIcon name="cover.jpg" thumbnail={thumbnailUrl} />
<FileTypeIcon isFolder />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — FileTypeIcon

<!-- Resolved from the name extension -->
<gnome-file-type-icon name="report.pdf"></gnome-file-type-icon>

<!-- Resolved from a MIME type — takes precedence over name when both are set -->
<gnome-file-type-icon mime-type="image/png"></gnome-file-type-icon>

<!-- Folder, regardless of name/mime-type -->
<gnome-file-type-icon is-folder></gnome-file-type-icon>

<!-- Thumbnail instead of the resolved icon -->
<gnome-file-type-icon name="sunset.jpg" thumbnail="/preview.jpg" size="lg"></gnome-file-type-icon>

Full docs & controls →

FilterableMultiSelectDropdown¶

gnome-ui.org/react — FilterableMultiSelectDropdown

import { useState } from 'react';
import { FilterableMultiSelectDropdown } from '@gnome-ui/react';

const [countries, setCountries] = useState<string[]>(['us']);

<FilterableMultiSelectDropdown
  aria-label="Countries"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'gb', label: 'United Kingdom' },
    { value: 'de', label: 'Germany' },
  ]}
  value={countries}
  onChange={setCountries}
/>

Full docs & controls →

import { FilterableMultiSelectDropdown } from '@gnome-ui/react-native';

<FilterableMultiSelectDropdown
  options={languages}
  value={selected}
  onChange={setSelected}
  filterPlaceholder="Search languages…"
/>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

FontPicker¶

gnome-ui.org/react — FontPicker

import { useState } from 'react';
import { FontPicker } from '@gnome-ui/react';

const [font, setFont] = useState({ family: 'Cantarell', size: 11, weight: 400 });

<FontPicker value={font} onChange={setFont} />

Full docs & controls →

gnome-ui.org/react — Footer

import { Footer } from '@gnome-ui/react';

<Footer />

Full docs & controls →

Frame¶

gnome-ui.org/react — Frame

import { Frame } from '@gnome-ui/react';

<Frame />

Full docs & controls →

HeaderBar¶

gnome-ui.org/react — HeaderBar

import { HeaderBar } from '@gnome-ui/react';

<HeaderBar />

Full docs & controls →

import { HeaderBar } from '@gnome-ui/react-native';

<HeaderBar />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — HeaderBar

<gnome-header-bar>
  <span data-slot="header-start">
    <button type="button" aria-label="Back">←</button>
  </span>
  <span data-slot="header-title">Contacts</span>
  <span data-slot="header-end">
    <button type="button" aria-label="Add contact">+</button>
  </span>
</gnome-header-bar>

Full docs & controls →

Highlight¶

gnome-ui.org/react — Highlight

import { Highlight } from '@gnome-ui/react';

<Highlight text="Preferences for accessibility" query="access" />
<Highlight text="The quick brown fox" query={['quick', 'fox']} />

Full docs & controls →

import { Highlight } from '@gnome-ui/react-native';

<Highlight text="Preferences for accessibility" query="access" />
<Highlight text="The quick brown fox" query={['quick', 'fox']} />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Icon¶

gnome-ui.org/react — Icon

<Icon icon={Search} color="blue" />
<Icon icon={Search} color="red" size="lg" />
<Icon icon={Search} /> {/* inherits currentColor */}

Full docs & controls →

import { Search } from '@gnome-ui/icons';
import { Icon } from '@gnome-ui/react-native';

<Icon icon={Search} label="Search" size="lg" color="blue" />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

IconButton¶

gnome-ui.org/react — IconButton

import { Search, Settings } from '@gnome-ui/icons';
import { IconButton } from '@gnome-ui/react';

<IconButton icon={Search} label="Search" />
<IconButton icon={Settings} label="Settings" variant="flat" tooltip="Open settings" />

Full docs & controls →

import { IconButton } from '@gnome-ui/react-native';
import { Search } from '@gnome-ui/icons';

<IconButton icon={Search} label="Search" />
<IconButton icon={Search} label="Search" tooltip="Search files" />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — IconButton

<gnome-icon-button variant="flat" label="Close panel">
  <button type="button" data-slot="icon-button-control">
    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
      <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.5" fill="none" />
    </svg>
  </button>
</gnome-icon-button>

Full docs & controls →

InlineViewSwitcher¶

gnome-ui.org/react — InlineViewSwitcher

import { InlineViewSwitcher } from '@gnome-ui/react';

<InlineViewSwitcher />

Full docs & controls →

import { InlineViewSwitcher, InlineViewSwitcherItem } from '@gnome-ui/react-native';

const [view, setView] = useState('grid');

<InlineViewSwitcher value={view} onValueChange={setView} variant="pill">
  <InlineViewSwitcherItem name="grid" label="Grid" icon={Applications} />
  <InlineViewSwitcherItem name="list" label="List" icon={ViewSidebar} />
</InlineViewSwitcher>

// Collapse to a BottomSheet picker when the items stop fitting
<InlineViewSwitcher value={view} onValueChange={setView} overflow="menu">
  {/* … */}
</InlineViewSwitcher>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Kbd¶

gnome-ui.org/react — Kbd

import { Kbd } from '@gnome-ui/react';

<p>Press <Kbd>Enter</Kbd> to continue.</p>
<p>Hold <Kbd>Shift</Kbd> while dragging to select multiple files.</p>

Full docs & controls →

gnome-ui.org/web-components — Kbd

Press <gnome-kbd>Enter</gnome-kbd> to confirm, or <gnome-kbd>Esc</gnome-kbd>
to cancel.

<!-- Unknown key names render as-is -->
<gnome-kbd>F5</gnome-kbd>

<!-- Raw text instead of the normalised symbol -->
<gnome-kbd raw>Enter</gnome-kbd>

Full docs & controls →

LevelBar¶

gnome-ui.org/react — LevelBar

import { LevelBar } from '@gnome-ui/react';

<LevelBar value={0.82} low={0.25} high={0.9} aria-label="Disk usage" />

Full docs & controls →

import { LevelBar } from '@gnome-ui/react-native';

<LevelBar value={0.15} low={0.25} high={0.75} accessibilityLabel="Battery" />
<LevelBar value={0.6} discrete numBlocks={5} accessibilityLabel="Signal strength" />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — LevelBar

<gnome-level-bar
  aria-label="Disk usage"
  value="0.85"
  low="0.2"
  high="0.8"
></gnome-level-bar>

<!-- discrete mode: signal-strength style blocks -->
<gnome-level-bar
  aria-label="Signal strength"
  discrete
  num-blocks="5"
  value="0.6"
></gnome-level-bar>

Full docs & controls →

Link¶

gnome-ui.org/react — Link

import { Link } from '@gnome-ui/react';

<Link />

Full docs & controls →

import { Link } from '@gnome-ui/react-native';

<Link href="https://gnome.org" external>
  GNOME
</Link>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

LinkedGroup¶

gnome-ui.org/react — LinkedGroup

import { LinkedGroup } from '@gnome-ui/react';

<LinkedGroup />

Full docs & controls →

import { Button, LinkedGroup } from '@gnome-ui/react-native';

<LinkedGroup>
  <Button>Cut</Button>
  <Button>Copy</Button>
  <Button>Paste</Button>
</LinkedGroup>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — LinkedGroup

<gnome-linked-group>
  <gnome-button>
    <button type="button" data-slot="button-control">Cut</button>
  </gnome-button>
  <gnome-button>
    <button type="button" data-slot="button-control">Copy</button>
  </gnome-button>
  <gnome-button>
    <button type="button" data-slot="button-control">Paste</button>
  </gnome-button>
</gnome-linked-group>

<!-- Stack vertically -->
<gnome-linked-group vertical>…</gnome-linked-group>

Full docs & controls →

gnome-ui.org/web-components — Menu

<gnome-menu placement="bottom">
  <button type="button" data-slot="menu-trigger">Project options</button>

  <section data-slot="menu-content">
    <span data-slot="menu-label">Project</span>
    <button type="button" data-menu-item data-value="rename">Rename</button>
    <button type="button" data-menu-item disabled>Duplicate</button>
    <button type="button" data-menu-item data-value="archive">
      Archive
      <span data-slot="menu-shortcut" aria-hidden="true">⇧⌘A</span>
    </button>
    <hr data-slot="menu-separator" />
    <a href="/settings" data-menu-item data-value="settings">
      Project settings
    </a>
  </section>
</gnome-menu>

<script type="module">
  document.querySelector('gnome-menu').addEventListener('gnome-select', (event) => {
    if (event.detail.value === 'archive' && !window.confirm('Archive project?')) {
      event.preventDefault();
    }
  });
</script>

Full docs & controls →

gnome-ui.org/react — Modal

import { Modal } from '@gnome-ui/react';

<Modal />

Full docs & controls →

MultiSelectDropdown¶

gnome-ui.org/react — MultiSelectDropdown

import { useState } from 'react';
import { MultiSelectDropdown } from '@gnome-ui/react';

const [languages, setLanguages] = useState<string[]>(['ts']);

<MultiSelectDropdown
  aria-label="Languages"
  options={[
    { value: 'js', label: 'JavaScript' },
    { value: 'ts', label: 'TypeScript' },
    { value: 'py', label: 'Python' },
  ]}
  value={languages}
  onChange={setLanguages}
/>

Full docs & controls →

import { MultiSelectDropdown } from '@gnome-ui/react-native';

<MultiSelectDropdown
  options={[
    { value: 'wifi', label: 'Wi-Fi' },
    { value: 'bluetooth', label: 'Bluetooth' },
  ]}
  value={permissions}
  onChange={setPermissions}
  placeholder="Select permissions"
/>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

NavigationSplitView¶

gnome-ui.org/react — NavigationSplitView

import { NavigationSplitView } from '@gnome-ui/react';

<NavigationSplitView />

Full docs & controls →

import { NavigationSplitView } from '@gnome-ui/react-native';

const [showContent, setShowContent] = useState(false);

<NavigationSplitView
  showContent={showContent}
  sidebar={<MailList onSelect={() => setShowContent(true)} />}
  content={<MailDetail onBack={() => setShowContent(false)} />}
/>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

NavigationView¶

gnome-ui.org/react — NavigationView

import { NavigationView } from '@gnome-ui/react';

<NavigationView />

Full docs & controls →

OtpInput¶

gnome-ui.org/react — OtpInput

import { useState } from 'react';
import { OtpInput } from '@gnome-ui/react';

const [code, setCode] = useState('');

<OtpInput
  label="Verification code"
  value={code}
  onChange={setCode}
  onComplete={(fullCode) => verify(fullCode)}
/>

Full docs & controls →

gnome-ui.org/web-components — OtpInput

<gnome-otp-input label="Verification code" helper-text="We sent a 6-digit code to your email.">
</gnome-otp-input>

<script type="module">
  const otp = document.querySelector('gnome-otp-input');

  otp.addEventListener('gnome-change', (event) => {
    console.log('Value:', event.detail.value);
  });

  otp.addEventListener('gnome-complete', (event) => {
    console.log('Complete:', event.detail.value);
  });

  otp.length = 6; // default
  otp.value = '123'; // pre-fill programmatically
</script>

Full docs & controls →

Overlay¶

gnome-ui.org/react — Overlay

import { Overlay } from '@gnome-ui/react';

<Overlay open={open} onDismiss={() => setOpen(false)}>
  <MyCustomPanel />
</Overlay>

Full docs & controls →

import { Overlay, Button } from '@gnome-ui/react-native';

<Button onPress={() => setOpen(true)}>Open</Button>
<Overlay open={open} onDismiss={() => setOpen(false)}>
  <YourOwnCard />
</Overlay>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

OverlaySplitView¶

gnome-ui.org/react — OverlaySplitView

import { OverlaySplitView } from '@gnome-ui/react';

<OverlaySplitView />

Full docs & controls →

PasswordEntryRow¶

gnome-ui.org/react — PasswordEntryRow

import { PasswordEntryRow } from '@gnome-ui/react';

<PasswordEntryRow />

Full docs & controls →

import { PasswordEntryRow } from '@gnome-ui/react-native';

<BoxedList>
  <PasswordEntryRow title="Password" value={password} onValueChange={setPassword} />

  {/* Registration and change-password forms */}
  <PasswordEntryRow
    title="New password"
    value={next}
    onValueChange={setNext}
    autoComplete="new-password"
  />
</BoxedList>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

PasswordField¶

gnome-ui.org/react — PasswordField

import { PasswordField } from '@gnome-ui/react';

<PasswordField label="Password" helperText="Must be at least 8 characters." />
<PasswordField label="Confirm password" error="Passwords do not match." />
<PasswordField label="PIN" revealable={false} />

Full docs & controls →

import { PasswordField } from '@gnome-ui/react-native';

<PasswordField
  label="Password"
  value={password}
  onChangeText={setPassword}
  helperText="At least 8 characters"
  autoComplete="new-password"
/>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

PathBar¶

gnome-ui.org/react — PathBar

import { PathBar } from "@gnome-ui/react";

<PathBar
  segments={[
    { label: "Home",      path: "/home"                     },
    { label: "Documents", path: "/home/documents"           },
    { label: "Projects",  path: "/home/documents/projects"  },
  ]}
  onNavigate={(path) => navigate(path)}
/>

Full docs & controls →

import { PathBar } from '@gnome-ui/react-native';

<PathBar
  segments={[
    { label: 'Home', path: '/home' },
    { label: 'Documents', path: '/home/documents' },
    { label: 'Projects', path: '/home/documents/projects' },
  ]}
  onNavigate={(path, index) => go(path)}
/>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/react — Popover

import { Popover } from '@gnome-ui/react';

<Popover />

Full docs & controls →

import { Button, Popover, Text } from '@gnome-ui/react-native';

<Popover content={<Text>Rich content here</Text>}>
  <Button>Open</Button>
</Popover>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Popover

<gnome-popover placement="bottom">
  <button type="button" data-slot="popover-trigger">Options</button>

  <section data-slot="popover-content">
    <a href="/profile">Profile</a>
    <button type="button">Sign out</button>
  </section>
</gnome-popover>

Full docs & controls →

Portal¶

gnome-ui.org/react — Portal

import { Portal } from '@gnome-ui/react';

<Portal>
  <div role="alert">Rendered at the end of document.body</div>
</Portal>

<Portal container={someElement}>
  <div>Rendered inside someElement instead</div>
</Portal>

Full docs & controls →

PreferencesDialog¶

gnome-ui.org/react — PreferencesDialog

<PreferencesDialog open={open} onClose={() => setOpen(false)}>
  <PreferencesPage title="General" iconName="preferences-system-symbolic">
    <PreferencesGroup title="Appearance">
      <BoxedList>
        <SwitchRow title="Dark mode" />
      </BoxedList>
    </PreferencesGroup>
  </PreferencesPage>
</PreferencesDialog>

Full docs & controls →

PreferencesGroup¶

gnome-ui.org/react — PreferencesGroup

import { PreferencesGroup } from '@gnome-ui/react';

<PreferencesGroup />

Full docs & controls →

import { PreferencesGroup } from '@gnome-ui/react-native';

<PreferencesGroup
  title="Appearance"
  description="How the app looks on this device."
  headerSuffix={<Button variant="flat" onPress={reset}>Reset</Button>}
>
  <BoxedList>{rows}</BoxedList>
</PreferencesGroup>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

PreferencesPage¶

gnome-ui.org/react — PreferencesPage

import { PreferencesPage } from '@gnome-ui/react';

<PreferencesPage />

Full docs & controls →

ProgressBar¶

gnome-ui.org/react — ProgressBar

import { ProgressBar } from '@gnome-ui/react';

<ProgressBar />

Full docs & controls →

import { ProgressBar } from '@gnome-ui/react-native';

<ProgressBar value={0.6} accessibilityLabel="Download progress" />;
<ProgressBar variant="success" value={1} />;

// Indeterminate — unknown duration:
<ProgressBar accessibilityLabel="Loading" />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — ProgressBar

<gnome-progress-bar aria-label="Download progress" value="0.6"></gnome-progress-bar>
<gnome-progress-bar aria-label="Download progress" variant="success"></gnome-progress-bar>
<!-- indeterminate: omit value -->
<gnome-progress-bar aria-label="Download progress"></gnome-progress-bar>

Full docs & controls →

RadioButton¶

gnome-ui.org/react — RadioButton

import { RadioButton } from '@gnome-ui/react';

<RadioButton />

Full docs & controls →

import { useState } from 'react';
import { RadioButton } from '@gnome-ui/react-native';

function SizeOptions() {
  const [size, setSize] = useState<'sm' | 'md' | 'lg'>('md');

  return (
    <>
      {(['sm', 'md', 'lg'] as const).map((option) => (
        <RadioButton
          key={option}
          value={size === option}
          onSelect={() => setSize(option)}
          accessibilityLabel={option}
        />
      ))}
    </>
  );
}

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

RangeSlider¶

gnome-ui.org/react — RangeSlider

import { useState } from 'react';
import { RangeSlider } from '@gnome-ui/react';

const [range, setRange] = useState<[number, number]>([20, 80]);

<RangeSlider value={range} onChange={setRange} minLabel="Minimum price" maxLabel="Maximum price" />

Full docs & controls →

import { RangeSlider } from '@gnome-ui/react-native';

<RangeSlider
  value={priceRange}
  onChange={setPriceRange}
  minLabel="Minimum price"
  maxLabel="Maximum price"
/>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

RatingStars¶

gnome-ui.org/react — RatingStars

import { RatingStars } from '@gnome-ui/react';

// Read-only — omit onChange
<RatingStars value={4.2} max={5} aria-label="Average rating: 4.2 out of 5" />

// Interactive — pass onChange
<RatingStars value={rating} onChange={setRating} />

Full docs & controls →

import { RatingStars } from '@gnome-ui/react-native';

// Read-only — omit onChange
<RatingStars value={4.2} accessibilityLabel="Average rating: 4.2 out of 5" />

// Interactive — pass onChange
<RatingStars value={rating} onChange={setRating} />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — RatingStars

<gnome-rating-stars value="3" max="5"></gnome-rating-stars>

<script type="module">
  const ratingStars = document.querySelector('gnome-rating-stars');

  ratingStars.addEventListener('gnome-change', (event) => {
    console.log('New rating:', event.detail.value);
  });
</script>

Full docs & controls →

ScrollToTop¶

gnome-ui.org/react — ScrollToTop

import { ScrollToTop } from '@gnome-ui/react';

<ScrollToTop />

Full docs & controls →

import { ScrollToTop } from '@gnome-ui/react-native';

const scrollRef = useRef<ScrollView>(null);
const [scrollY, setScrollY] = useState(0);

<View style={{ flex: 1 }}>
  <ScrollView
    ref={scrollRef}
    onScroll={(e) => setScrollY(e.nativeEvent.contentOffset.y)}
    scrollEventThrottle={16}
  >
    {/* ... */}
  </ScrollView>
  <ScrollToTop
    scrollY={scrollY}
    onPress={() => scrollRef.current?.scrollTo({ y: 0, animated: true })}
  />
</View>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

SearchBar¶

gnome-ui.org/react — SearchBar

import { SearchBar } from '@gnome-ui/react';

<SearchBar />

Full docs & controls →

import { SearchBar } from '@gnome-ui/react-native';

<SearchBar
  open
  value={query}
  onChangeText={setQuery}
  onClear={() => setQuery('')}
  onClose={() => setOpen(false)}
/>;

// Filter chips below the bar:
<SearchBar open value={query} onChangeText={setQuery}>
  <Chip label="Apps" />
  <Chip label="Documents" />
</SearchBar>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

SecurityMetric¶

gnome-ui.org/react — SecurityMetric

import { SecurityMetric } from "@gnome-ui/react";

<SecurityMetric
  label="Critical findings"
  value={7}
  severity="critical"
  description="Require immediate triage"
  delta="+2 since last scan"
  trend="up"
/>

Full docs & controls →

SegmentedBar¶

gnome-ui.org/react — SegmentedBar

<SegmentedBar
  values={[
    { label: "TypeScript", value: 60, color: "#3178c6" },
    { label: "JavaScript", value: 30, color: "#f7df1e" },
    { label: "CSS",        value: 10, color: "#563d7c" },
  ]}
/>

Full docs & controls →

import { SegmentedBar } from '@gnome-ui/react-native';

<SegmentedBar
  values={[
    { label: 'TypeScript', value: 60, color: '#3178c6' },
    { label: 'JavaScript', value: 30, color: '#f7df1e' },
    { label: 'CSS',        value: 10, color: '#563d7c' },
  ]}
/>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Separator¶

gnome-ui.org/react — Separator

import { Separator } from '@gnome-ui/react';

<Separator />

Full docs & controls →

import { Separator } from '@gnome-ui/react-native';

<Separator />;
<Separator orientation="vertical" style={{ height: 24 }} />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Separator

<gnome-separator></gnome-separator>

<!-- Inside a flex row: stretches via align-self: stretch -->
<div style="display: flex; align-items: center; gap: 12px; height: 32px;">
  <span>Files</span>
  <gnome-separator orientation="vertical"></gnome-separator>
  <span>Music</span>
</div>

Full docs & controls →

SeverityBadge¶

gnome-ui.org/react — SeverityBadge

import { SeverityBadge } from "@gnome-ui/react";

<SeverityBadge severity="critical" />
<SeverityBadge severity="minimal" />

Full docs & controls →

ShortcutLabel¶

gnome-ui.org/react — ShortcutLabel

import { ShortcutLabel } from '@gnome-ui/react';

<ShortcutLabel />

Full docs & controls →

ShortcutsDialog¶

gnome-ui.org/react — ShortcutsDialog

import { ShortcutsDialog } from '@gnome-ui/react';

<ShortcutsDialog />

Full docs & controls →

gnome-ui.org/react — Sidebar

import { Sidebar } from '@gnome-ui/react';

<Sidebar />

Full docs & controls →

import { Sidebar, SidebarItem, SidebarSection } from '@gnome-ui/react-native';

<Sidebar>
  <SidebarSection title="Mailboxes">
    <SidebarItem label="Inbox" icon={<InboxIcon />} active onPress={() => go('inbox')} />
    <SidebarItem label="Starred" icon={<StarIcon />} suffix={<Text variant="caption">3</Text>} />
  </SidebarSection>
  <SidebarSection title="Labels" collapsible>
    <SidebarItem label="Work" />
    <SidebarItem label="Archived" disabled />
  </SidebarSection>
</Sidebar>;

// Rail (icon-only) mode:
<Sidebar collapsed>…</Sidebar>;

// Controlled filtering — pair with your own search input:
<Sidebar filter={query}>…</Sidebar>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

Skeleton¶

gnome-ui.org/react — Skeleton

import { Skeleton } from '@gnome-ui/react';

<Skeleton />

Full docs & controls →

import { Skeleton } from '@gnome-ui/react-native';

<Skeleton />;
<Skeleton width={220} height={16} />;
<Skeleton variant="circle" size={48} />;
<Skeleton variant="text" lines={3} />;
<Skeleton animated={false} />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Skeleton

<gnome-skeleton width="240" height="20"></gnome-skeleton>
<gnome-skeleton variant="circle" size="48"></gnome-skeleton>
<gnome-skeleton variant="text" lines="3"></gnome-skeleton>

Full docs & controls →

Slider¶

gnome-ui.org/react — Slider

import { Slider } from '@gnome-ui/react';

<Slider />

Full docs & controls →

import { Slider } from '@gnome-ui/react-native';

<Slider
  value={volume}
  onChange={setVolume}
  accessibilityLabel="Volume"
  marks={[
    { value: 0, label: 'Min' },
    { value: 100, label: 'Max' },
  ]}
/>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Slider

<gnome-slider>
  <input
    type="range"
    data-slot="slider-control"
    aria-label="Brightness"
    min="0"
    max="100"
    value="50"
  />
</gnome-slider>

Full docs & controls →

Spacer¶

gnome-ui.org/react — Spacer

import { Spacer } from '@gnome-ui/react';

<Spacer />

Full docs & controls →

SpinButton¶

gnome-ui.org/react — SpinButton

import { SpinButton } from '@gnome-ui/react';

<SpinButton />

Full docs & controls →

import { SpinButton } from '@gnome-ui/react-native';

<SpinButton value={quantity} onChange={setQuantity} min={0} max={10} accessibilityLabel="Quantity" />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — SpinButton

<gnome-spin-button>
  <button type="button" data-slot="spin-button-decrement" aria-hidden="true" tabindex="-1">
    −
  </button>
  <input
    type="number"
    data-slot="spin-button-control"
    aria-label="Volume"
    min="0"
    max="10"
    value="5"
  />
  <button type="button" data-slot="spin-button-increment" aria-hidden="true" tabindex="-1">
    +
  </button>
</gnome-spin-button>

Full docs & controls →

Spinner¶

gnome-ui.org/react — Spinner

import { Spinner } from '@gnome-ui/react';

<Spinner />

Full docs & controls →

import { Spinner } from '@gnome-ui/react-native';

<Spinner />;
<Spinner size="lg" label="Syncing your library…" />;

// Rendered alongside your own label instead of announcing its own:
<Spinner label="" />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Spinner

<gnome-spinner size="lg"></gnome-spinner>
<gnome-spinner label="Fetching results…"></gnome-spinner>
<gnome-spinner label=""></gnome-spinner>
<!-- silenced: a sibling already announces the loading state -->

Full docs & controls →

SpinRow¶

gnome-ui.org/react — SpinRow

import { SpinRow } from '@gnome-ui/react';

<SpinRow />

Full docs & controls →

import { SpinRow } from '@gnome-ui/react-native';

<BoxedList>
  <SpinRow
    title="Volume"
    subtitle="Output level"
    value={volume}
    onValueChange={setVolume}
    min={0}
    max={100}
  />
</BoxedList>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

SplitButton¶

gnome-ui.org/react — SplitButton

import { SplitButton } from '@gnome-ui/react';

<SplitButton />

Full docs & controls →

import { SplitButton, Button } from '@gnome-ui/react-native';

<SplitButton
  label="Save"
  onPress={() => save()}
  dropdownContent={
    <Button variant="flat" size="sm" onPress={() => saveAs()}>
      Save as Template
    </Button>
  }
/>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

StatusBadge¶

gnome-ui.org/react — StatusBadge

import { StatusBadge } from "@gnome-ui/react";

<StatusBadge variant="success">published</StatusBadge>
<StatusBadge variant="warning">beta</StatusBadge>
<StatusBadge variant="new">new</StatusBadge>

Full docs & controls →

import { StatusBadge } from '@gnome-ui/react-native';

<StatusBadge variant="success">published</StatusBadge>
<StatusBadge variant="warning">beta</StatusBadge>
<StatusBadge variant="new">new</StatusBadge>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

StatusPage¶

gnome-ui.org/react — StatusPage

import { StatusPage } from '@gnome-ui/react';

<StatusPage />

Full docs & controls →

import { StatusPage } from '@gnome-ui/react-native';

<StatusPage
  icon={StarOutline}
  title="No favorites yet"
  description="Packages you star will show up here."
>
  <Button variant="suggested" onPress={onAdd}>Add a package</Button>
</StatusPage>

// For sidebars, popovers, and small panels
<StatusPage compact icon={Search} title="No results" />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

StepIndicator¶

gnome-ui.org/react — StepIndicator

import { StepIndicator } from '@gnome-ui/react';

<StepIndicator steps={4} currentStep={1} />
<StepIndicator steps={['Account', 'Profile', 'Confirm']} currentStep={1} />

Full docs & controls →

import { StepIndicator } from '@gnome-ui/react-native';

<StepIndicator steps={5} currentStep={1} />

<StepIndicator
  steps={['Account', 'Profile', 'Payment', 'Confirm']}
  currentStep={2}
  onStepClick={setCurrentStep}
/>

<StepIndicator steps={4} currentStep={2} orientation="vertical" />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — StepIndicator

<!-- Unlabelled: shows a "Step X of Y" caption -->
<gnome-step-indicator steps="4" current="1"></gnome-step-indicator>

<!-- Labelled: shows each step's label instead of the caption -->
<gnome-step-indicator steps="Account, Profile, Confirm" current="0" clickable>
</gnome-step-indicator>

<script type="module">
  document.querySelector('gnome-step-indicator[clickable]').addEventListener(
    'gnome-select',
    (event) => {
      // event.detail.step — jump back to a completed step.
    },
  );
</script>

Full docs & controls →

Switch¶

gnome-ui.org/react — Switch

import { Switch } from '@gnome-ui/react';

<Switch />

Full docs & controls →

import { useState } from 'react';
import { Switch } from '@gnome-ui/react-native';

function WifiRow() {
  const [enabled, setEnabled] = useState(true);

  return <Switch value={enabled} onValueChange={setEnabled} accessibilityLabel="Wi-Fi" />;
}

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Switch

<label>
  Wi-Fi
  <gnome-switch>
    <input type="checkbox" role="switch" data-slot="switch-control" />
  </gnome-switch>
</label>

<script type="module">
  const control = document.querySelector('gnome-switch input');

  control.addEventListener('change', () => {
    console.log('Wi-Fi is now', control.checked ? 'on' : 'off');
  });
</script>

Full docs & controls →

SwitchRow¶

gnome-ui.org/react — SwitchRow

import { SwitchRow } from '@gnome-ui/react';

<SwitchRow />

Full docs & controls →

import { BoxedList, SwitchRow } from '@gnome-ui/react-native';

<BoxedList>
  <SwitchRow
    title="Wi-Fi"
    subtitle="Home Network"
    checked={wifi}
    onCheckedChange={setWifi}
  />
</BoxedList>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — SwitchRow

<gnome-switch-row>
  <span data-slot="row-prefix">🔔</span>
  <span data-slot="row-title">Notifications</span>
  <span data-slot="row-subtitle">Get notified about updates</span>
</gnome-switch-row>

<script type="module">
  document.querySelector('gnome-switch-row').addEventListener('gnome-change', (event) => {
    console.log('Checked:', event.detail.checked);
  });
</script>

Full docs & controls →

TabBar¶

gnome-ui.org/web-components — TabBar

<gnome-tab-bar aria-label="Settings sections">
  <button role="tab" aria-selected="true">General</button>
  <button role="tab" aria-selected="false">Notifications</button>
  <button role="tab" aria-selected="false">Privacy</button>
</gnome-tab-bar>

<script type="module">
  const tabBar = document.querySelector('gnome-tab-bar');

  tabBar.addEventListener('click', (event) => {
    const tab = event.target.closest('[role="tab"]');
    if (!tab) return;

    for (const other of tabBar.querySelectorAll('[role="tab"]')) {
      other.setAttribute('aria-selected', String(other === tab));
    }
  });
</script>

Full docs & controls →

Tabs¶

gnome-ui.org/react — Tabs

import { Tabs } from '@gnome-ui/react';

<Tabs />

Full docs & controls →

TagInput¶

gnome-ui.org/react — TagInput

import { useState } from 'react';
import { TagInput } from '@gnome-ui/react';

const [tags, setTags] = useState(['react', 'gnome']);

<TagInput label="Tags" value={tags} onChange={setTags} placeholder="Add a tag…" />

Full docs & controls →

import { TagInput } from '@gnome-ui/react-native';

const [tags, setTags] = useState(['react', 'gnome']);

<TagInput label="Tags" value={tags} onChange={setTags} placeholder="Add a tag…" />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

TerminalView¶

gnome-ui.org/react — TerminalView

import { TerminalView } from "@gnome-ui/react";

<TerminalView lines={["$ npm install", "added 42 packages"]} />

Full docs & controls →

Text¶

gnome-ui.org/react — Text

import { Text } from '@gnome-ui/react';

<Text />

Full docs & controls →

import { Text } from '@gnome-ui/react-native';

<Text variant="title-1">Settings</Text>
<Text variant="caption" color="dim">Last synced 5 minutes ago</Text>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

TextField¶

gnome-ui.org/react — TextField

import { TextField } from '@gnome-ui/react';

<TextField />

Full docs & controls →

import { TextField } from '@gnome-ui/react-native';

<TextField
  label="Username"
  helperText="Enter your username"
  value={username}
  onChangeText={setUsername}
/>;

<TextField label="Email" error="This field is required" />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — TextField

<gnome-text-field>
  <label data-slot="text-field-label">Username</label>
  <input type="text" data-slot="text-field-control" placeholder="octocat" />
  <span data-slot="text-field-hint">Choose a unique handle.</span>
</gnome-text-field>

Full docs & controls →

TextTruncate¶

gnome-ui.org/react — TextTruncate

import { TextTruncate } from '@gnome-ui/react';

<TextTruncate>A very long file name that might not fit in the sidebar.txt</TextTruncate>
<TextTruncate lines={3}>A longer description that should clamp after three lines…</TextTruncate>

Full docs & controls →

gnome-ui.org/web-components — TextTruncate

<div style="width: 220px">
  <gnome-text-truncate>A very long file name that might not fit in the available space.txt</gnome-text-truncate>
</div>

Full docs & controls →

Timeline¶

gnome-ui.org/react — Timeline

import { Timeline } from "@gnome-ui/react";

<Timeline
  items={[
    {
      leading: <Text variant="caption" color="dim">10:32</Text>,
      icon: <Icon icon={Check} />,
      content: <Text variant="body">Document approved</Text>,
    },
  ]}
/>

Full docs & controls →

import { Timeline } from '@gnome-ui/react-native';

<Timeline
  items={[
    { leading: <Text color="dim">10:00</Text>, icon: <Icon icon={Check} tintColor={theme.accentFgColor} />, content: <Text>Approved</Text> },
    { content: <Text>Pending review</Text> },
  ]}
/>

<Timeline orientation="horizontal" variant="dotted" items={steps} />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

TimePicker¶

gnome-ui.org/react — TimePicker

import { TimePicker, type TimeValue } from '@gnome-ui/react/components/TimePicker';

function Example() {
  const [time, setTime] = useState<TimeValue | null>(null);
  return <TimePicker label="Start time" value={time} onChange={setTime} />;
}

Full docs & controls →

Toast¶

gnome-ui.org/react — Toast

import { Toast } from '@gnome-ui/react';

<Toast />

Full docs & controls →

import { Toast, Toaster } from '@gnome-ui/react-native';

function App() {
  const [toasts, setToasts] = useState<{ id: number; message: string }[]>([]);

  return (
    <View style={{ flex: 1 }}>
      <YourAppContent />

      <Toaster>
        {toasts.map((t) => (
          <Toast
            key={t.id}
            title={t.message}
            dismissible
            onDismiss={() => setToasts((prev) => prev.filter((x) => x.id !== t.id))}
          />
        ))}
      </Toaster>
    </View>
  );
}

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Toast

<gnome-toast id="saved-toast" duration="5000" variant="success">
  <span data-slot="toast-title">Changes saved</span>
  <span data-slot="toast-actions">
    <button type="button" data-action="undo">Undo</button>
    <button type="button" data-dismiss aria-label="Dismiss notification">×</button>
  </span>
</gnome-toast>

<script type="module">
  const toast = document.querySelector('#saved-toast');
  toast.show();

  toast.addEventListener('gnome-action', (event) => {
    if (event.detail.action === 'undo') {
      // Undo the operation.
    }
  });
</script>

Full docs & controls →

ToggleGroup¶

gnome-ui.org/react — ToggleGroup

import { ToggleGroup } from '@gnome-ui/react';

<ToggleGroup />

Full docs & controls →

import { ToggleGroup, ToggleGroupItem } from '@gnome-ui/react-native';

const [align, setAlign] = useState('left');

<ToggleGroup value={align} onValueChange={setAlign} accessibilityLabel="Alignment">
  <ToggleGroupItem name="left" icon={FormatJustifyLeft} accessibilityLabel="Left" />
  <ToggleGroupItem name="center" icon={FormatJustifyCenter} accessibilityLabel="Center" />
  <ToggleGroupItem name="right" icon={FormatJustifyRight} accessibilityLabel="Right" />
</ToggleGroup>

// Items can be icon-only, label-only, or icon + label
<ToggleGroupItem name="grid" icon={Applications} label="Grid" />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/react — Toolbar

import { Toolbar } from '@gnome-ui/react';

<Toolbar />

Full docs & controls →

import { Button, Spacer, Toolbar } from '@gnome-ui/react-native';

<Toolbar>
  <Button variant="flat">Cancel</Button>
  <Spacer />
  <Button variant="flat">Done</Button>
</Toolbar>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Toolbar

<gnome-toolbar>
  <gnome-button variant="flat">
    <button type="button" data-slot="button-control">←</button>
  </gnome-button>
  <gnome-linked-group>
    <gnome-button variant="flat">
      <button type="button" data-slot="button-control">Bold</button>
    </gnome-button>
    <gnome-button variant="flat">
      <button type="button" data-slot="button-control">Italic</button>
    </gnome-button>
  </gnome-linked-group>
  <gnome-separator orientation="vertical" style="height: 24px"></gnome-separator>
  <gnome-dropdown>…</gnome-dropdown>
  <div style="flex: 1"></div>
  <gnome-button variant="suggested">
    <button type="button" data-slot="button-control">Save</button>
  </gnome-button>
</gnome-toolbar>

Full docs & controls →

ToolbarView¶

gnome-ui.org/react — ToolbarView

import { ToolbarView } from '@gnome-ui/react';

<ToolbarView />

Full docs & controls →

gnome-ui.org/react — Tooltip

import { Tooltip } from '@gnome-ui/react';

<Tooltip />

Full docs & controls →

import { Button, Tooltip } from '@gnome-ui/react-native';

<Tooltip label="Save file" placement="top">
  <Button accessibilityLabel="Save">Save</Button>
</Tooltip>;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — Tooltip

<gnome-tooltip placement="top" delay="500">
  <button type="button" data-slot="tooltip-trigger" aria-label="Save">💾</button>
  <span data-slot="tooltip-content">Save file (Ctrl+S)</span>
</gnome-tooltip>

Full docs & controls →

ViewSwitcher¶

gnome-ui.org/react — ViewSwitcher

import { ViewSwitcher } from '@gnome-ui/react';

<ViewSwitcher />

Full docs & controls →

import { ViewSwitcher } from '@gnome-ui/react-native';

<ViewSwitcher />

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

gnome-ui.org/web-components — ViewSwitcher

<gnome-view-switcher aria-label="View switcher">
  <button role="radio" aria-checked="true">List</button>
  <button role="radio" aria-checked="false">Grid</button>
  <button role="radio" aria-checked="false">Timeline</button>
</gnome-view-switcher>

<script type="module">
  const viewSwitcher = document.querySelector('gnome-view-switcher');

  viewSwitcher.addEventListener('click', (event) => {
    const item = event.target.closest('[role="radio"]');
    if (!item) return;

    for (const other of viewSwitcher.querySelectorAll('[role="radio"]')) {
      other.setAttribute('aria-checked', String(other === item));
    }
  });
</script>

Full docs & controls →

ViewSwitcherBar¶

gnome-ui.org/react — ViewSwitcherBar

import { ViewSwitcherBar } from '@gnome-ui/react';

<ViewSwitcherBar />

Full docs & controls →

ViewSwitcherSidebar¶

gnome-ui.org/react — ViewSwitcherSidebar

import { ViewSwitcherSidebar } from '@gnome-ui/react';

<ViewSwitcherSidebar />

Full docs & controls →

VisuallyHidden¶

gnome-ui.org/react — VisuallyHidden

import { VisuallyHidden } from '@gnome-ui/react';

<VisuallyHidden role="status" aria-live="polite">Copied to clipboard</VisuallyHidden>
<VisuallyHidden as="div" focusable>
  <a href="#main">Skip to content</a>
</VisuallyHidden>

Full docs & controls →

VulnerabilityFinding¶

gnome-ui.org/react — VulnerabilityFinding

import { VulnerabilityFinding } from "@gnome-ui/react";

<VulnerabilityFinding
  heading="XZ Utils backdoor"
  severity="critical"
  cveId="CVE-2024-3094"
  cvssScore={10}
  affected="xz 5.6.0"
  fixedVersion="5.6.1"
  description="Malicious build chain behavior detected in affected package versions."
/>

Full docs & controls →

VulnerabilitySummary¶

gnome-ui.org/react — VulnerabilitySummary

import { VulnerabilitySummary } from "@gnome-ui/react";

<VulnerabilitySummary
  counts={{
    critical: 3,
    high: 12,
    medium: 40,
    low: 8,
  }}
  description="Container image scan"
/>

Full docs & controls →

WidgetManager¶

gnome-ui.org/react — WidgetManager

import { WidgetManager } from '@gnome-ui/react';

<WidgetManager />

Full docs & controls →

import { WidgetManager, type WidgetDefinition } from '@gnome-ui/react-native';

const catalog: WidgetDefinition[] = [
  { id: 'clock', label: 'Clock', description: 'Shows the current time', render: () => <ClockWidget /> },
  { id: 'weather', label: 'Weather', render: () => <WeatherWidget /> },
];

<WidgetManager title="My Dashboard" catalog={catalog} value={widgetIds} onChange={setWidgetIds} />;

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.

WindowTitle¶

gnome-ui.org/react — WindowTitle

import { WindowTitle } from '@gnome-ui/react';

<WindowTitle />

Full docs & controls →

WrapBox¶

gnome-ui.org/react — WrapBox

import { WrapBox } from '@gnome-ui/react';

<WrapBox />

Full docs & controls →

import { WrapBox } from '@gnome-ui/react-native';

// Tag list
<WrapBox>
  {tags.map((tag) => <Chip key={tag} label={tag} />)}
</WrapBox>

// Tight between items, loose between lines
<WrapBox childSpacing={6} lineSpacing={18} justify="center">
  {filters.map((filter) => <Chip key={filter} label={filter} />)}
</WrapBox>

No web-viewable Storybook for this platform — verified on a real iOS Simulator instead. See the React Native package's own README.