Skip to content
EvolveEvolveEvolve

ui

@evolve-storefront/ui · v1.0.0 · Storybook ↗

Presentational building blocks for a storefront: buttons, form controls, dialogs, menus and layout primitives. They are generic and driven by props, with no data fetching and no commerce concepts. Every structural element carries a data-component attribute, so you can restyle it without copying the component, and every component has its own import path (@evolve-storefront/ui/button).

Get started

  1. Install the package with the peer dependencies it needs. It comes from the Evolve registry, which needs a one-time sign-in.

    pnpm add @evolve-storefront/ui react
    Requirements1
    react>=19

  2. Import its styles in the stylesheet where you load Tailwind. Without them the components render unstyled.

    @import "@evolve-storefront/ui/styles.css";

Then render it on a page:

import { Button } from "@evolve-storefront/ui/button";
import { Input, Label, TextField } from "@evolve-storefront/ui/text-field";


export function NewsletterForm({ label, submit }: { label: string; submit: string }) {
  return (
    <form className="flex items-end gap-2">
      <TextField name="email" type="email" required>
        <Label>{label}</Label>
        <Input autoComplete="email" />
      </TextField>
      <Button type="submit">{submit}</Button>
    </form>
  );
}

Components

What you place on your pages. Each one has a preview, its props, and how to change its layout.

AccordionA set of headed sections that expand and collapse.
ActionsMenuCollapses per-record actions into a ⋮ menu, so a row or card reads as its record rather than as its controls.
AlertDialogConfirmation dialog built on react-aria-components — for destructive actions (e.g.
BreadcrumbBreadcrumb navigation primitive — a pure, presentational compound.
ButtonGeneric button primitive.
CalloutA framed block explaining the state of something — why an action is offered, why it is not, or what the reader is waiting for.
CardCard surface — a domain-agnostic frame a consumer wraps around content.
CarouselA horizontally scrolling rail — the frame around any set of cards.
CheckboxCheckbox based on react-aria-components.
ComboBoxA text input that offers options as the user types, on react-aria-components, for a search answered elsewhere: the caller supplies items for the current inputValue.
ContainerPage-shell width.
DialogGeneric modal dialog primitive built on react-aria-components.
DropdownMenuGeneric dropdown menu primitive built on react-aria-components — a list of actions anchored to a trigger.
EmptyStateProp-driven empty-state shell — a dashed, centered container.
FormForm root.
GalleryA carousel that shows one slide at a time, with thumbnails that pick one.
HeadingSemantics only: turns a level into the matching tag.
FocusClearOfOverlaysScrolls a focused control out from under whatever scroll-padding on reserves for: a sticky header, a fixed bar, a consent banner.
SlotMerges its own props onto its single child element instead of rendering a wrapper — the asChild escape hatch, so yields one carrying the button's styling and behaviour.
IconRenders an icon by semantic name.
LabelLabel for react-aria-components fields (TextField, Select, Checkbox, RadioGroup).
NavItemNavigation item — a prop-driven link that highlights the current route via isCurrent and defers routing to a renderLink seam.
PaginationProp-driven pager: previous/next plus a page / pageCount readout, no data fetching.
PasswordFieldPassword field (react-aria-components) with a reveal toggle.
MeterA bar showing a quantity inside a known range, such as credit left out of a limit.
PasswordStrengthMeterPresentational password-strength meter — a segmented bar driven by a numeric score.
PopoverGeneric popover primitive built on react-aria-components — a floating panel anchored to a trigger.
NumberFieldA number typed in the page's own notation, such as an amount of money, based on react-aria-components: "1.000,50" in Dutch, "1,000.50" in English.
MultiSelectSelect for choosing several options, such as roles: the listbox stays open while options are checked, and the trigger lists what is chosen.
QuantityStepperProp-driven quantity stepper: a typeable number field between two step buttons, clamped to [min, max] and stepping by step.
RadioGroupRadio group based on react-aria-components.
RangeSliderTwo thumbs picking a range, such as a price filter, based on react-aria-components.
SelectAccessible select based on react-aria-components (custom listbox, not a native