PluginRow

An installed plugin or server with a switch that takes effect at once, its id, version, scope and description. The second list shows the loading state.

PluginRow

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, PluginRow

Figmafigma@officialv1.4.0UserReads designs, variables and components from Figma files and turns them into code that fits the project.

Frontend designfrontend-design@officialv0.9.2ProjectGuidance for interfaces with a clear direction, typography that fits and layouts that do not look like a template.

Accessibility checks with a name long enough to wrap on a narrow screena11y-checks@community-cataloguev2.0.0-beta.3LocalRuns axe-core and keyboard checks on the page in the preview and reports what fails with the selector, the rule and a suggested fix, ranked by how much it matters to people who use assistive technology.

Reading the plugin catalogue

Dark theme, PluginRow

Figmafigma@officialv1.4.0UserReads designs, variables and components from Figma files and turns them into code that fits the project.

Frontend designfrontend-design@officialv0.9.2ProjectGuidance for interfaces with a clear direction, typography that fits and layouts that do not look like a template.

Reading the plugin catalogue

High contrast theme, PluginRow

Figmafigma@officialv1.4.0UserReads designs, variables and components from Figma files and turns them into code that fits the project.

Frontend designfrontend-design@officialv0.9.2ProjectGuidance for interfaces with a clear direction, typography that fits and layouts that do not look like a template.

Reading the plugin catalogue

UsageLink to the section Usage

tsx

import { PluginRow } from '@skribly/ui/ops'

tsx

<List aria-label={t('plugins.installed')} items={plugins} emptyState={t('plugins.none')}>
  {(p) => <PluginRow id={p.id} title={p.title} identifier={p.id} version={p.version} versionLabel={t('common.version')}
    badges={<Badge size="sm">{t(`scope.${p.scope}`)}</Badge>} description={p.description}
    isEnabled={p.enabled} onEnabledChange={(on) => toggle(p, on)} switchLabel={t('plugins.enable', { name: p.title })}
    isBusy={busy === p.id} busyLabel={t('plugins.updating', { name: p.title })} />}
</List>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The switch is named after the plugin and says on or off; it waits while a change runs, with a named spinner beside it.
The result is confirmed with a polite message that stays until closed.
Right arrow reaches the switch and buttons; the description is clamped on screen only and read whole.

This demo runs through axe in all three themes on every test run. See what the tests check.