Sherick UI

A React 18/19 component library in graphite and iris, with deliberate shape contrast and restrained motion. 2.0.0 established the stable line; 1.x is frozen. This package source is 2.7.0; verified main stages new versions via npm trusted publishing for maintainer approval. Check the installed version for availability.

Install and style

npm install sherick-ui

import "./app.css"; // framework, reset or Tailwind CSS first
import "sherick-ui/styles.css";

The complete stylesheet is precompiled, scoped and reset-free. No consumer Tailwind configuration or package-content scan is needed. Load a dedicated selector-level app override stylesheet after Sherick if required; className utility overrides are merged by the components. sherick-ui/theme.css is also available for token-only applications. See the styling contract.

Use

import { Button, Field, Input, Select } from "sherick-ui";

export function Example() {
  return (
    <>
      <Input label="Email" name="email" type="email" required />
      <Field label="Project">
        <Select options={[
          { label: "Design system", value: "design" },
          { label: "Dashboard", value: "dashboard" },
        ]} defaultValue="design" />
      </Field>
      <Button appearance="filled">Save</Button>
    </>
  );
}

The root barrel contains actions, forms, selection, navigation, feedback and overlays. Markdown and CodeBlock are imported from ESM-only sherick-ui/content; CommonJS consumers use dynamic import(). The rich stack is installed with the package but never bundled by a core-only import. sherick-ui/dev is unsupported workbench infrastructure, not consumer API. For the current export list and semver boundaries see the release contract.

Use Media.Image and Media.Video for Sherick's rounded, clipped media frame. Examples and accessibility guidance cover content, decorative media and native video captions.

The v2.1 wave adds Calendar/DatePicker/DateRangePicker, Command/CommandPalette, Pagination/Breadcrumb, FileUpload, Stepper and TreeView to the same root barrel. Its component contracts use civil YYYY-MM-DD dates and File[] selections; FileUpload does not upload files. DateTimePicker (from 2.5.0) adds a time of day: a native datetime-local field whose popup pairs the calendar with hour and minute columns, using civil YYYY-MM-DDTHH:mm values.

Table and surface choices (from 2.2.0)

Table keeps string headers valid and also accepts descriptors. Its scroll wrapper is keyboard focusable, including when every cell contains passive text:

const columns = [
  { id: "name", label: "Name", className: "name-column" },
  { id: "amount", label: "Amount", className: "amount-column" },
];
<Table headers={columns} rows={rows} className="table-surface" tableClassName="invoice-table" />

A descriptor's class reaches both header and body cells. Use ordinary CSS for widths, alignment and tabular figures, and reuse the columns for placeholder rows. className remains on the scroll wrapper; tableClassName reaches the native table. Sorting, filtering, row content and data ownership remain yours. See the resource-list example.

RadioGroup appearance="surface" presents its existing radio rows as selectable surfaces. Use options[].label for rich, wrapping text, badges and non-interactive hints. It retains the same single-selection, keyboard and form contract; omit appearance for the original plain rows. Do not put buttons or links inside a radio's label.

Forms (from 2.6.0)

Form wraps Base UI's form. On submit it validates every named field, keeps the submission from leaving while any is invalid and moves focus to the first invalid field. Errors returned from a server go in errors, keyed by field name; each appears under its field, the form focuses the first one, and an entry clears as soon as its field changes.

import {
  CheckboxGroup, Combobox, Field, Form, Input, NumberField, Select, type FormErrors,
} from "sherick-ui";

const [errors, setErrors] = useState<FormErrors>({});

<Form errors={errors} onFormSubmit={async (values) => setErrors(await save(values))}>
  <Input name="title" label="Rule title" required />

  {/* Multiple: chosen values are chips; Backspace removes the last, arrows walk the chips. */}
  <Field name="roles" label="Required roles">
    <Combobox multiple options={roles} defaultValue={["admin"]} />
  </Field>

  {/* Groups: an option outside every group is listed where it stands. */}
  <Field name="channel" label="Channel">
    <Select options={[
      { label: "#rules", value: "rules" },
      { label: "Giveaways", options: [{ label: "#giveaway", value: "giveaway" }] },
    ]} />
  </Field>

  {/* Units are presentation and hidden from assistive technology: name them in the label. */}
  <Field name="price" label="Price per ticket (€)">
    <NumberField prefix="€" format={{ minimumFractionDigits: 2 }} defaultValue={0.1} step={0.05} />
  </Field>

  <CheckboxGroup
    name="casinos" label="Casinos" appearance="surface" required
    options={[{ value: "aurora", label: "Aurora", description: "aurora.example, aurora-play.example" }]}
  />

  {/* Creatable: "Add …" for typed text, one entry per pasted line, duplicates reported. */}
  <Field name="games" label="Allowed games" description="Paste one title per line.">
    <Combobox multiple creatable options={[]} />
  </Field>
</Form>

Input, Textarea, RadioGroup and CheckboxGroup carry their own Field, so name is enough. Put Select, Combobox, NumberField, Checkbox, Switch and Slider inside a Field with the name, or the form cannot report their errors. A multiple Combobox reports string[]; a created entry's value is its own text. CheckboxGroup required means at least one choice. Option description names nothing: the label is the accessible name and the description is announced as its description.

Spacing, labels and states (from 2.10.0)

Additive props follow the same names as the rest of the library. Nothing here renames or removes a prop.

• className styles the element it always styled. On Select that is the trigger, on Combobox the box, on Search the tray and on NumberField the root. A composite's other parts take their own props: fieldClassName styles the outer column of Search and the tray of NumberField, and popupClassName styles the sheet of Select and Combobox.
• Field orientation="horizontal" puts a setting's label and description at the start and its control at the end of one row. The label and description keep their 4px gap.
• size on Input, Select, Combobox, NumberField, Search and DatePicker is sm, md or lg (default md). sm is a 40px row, md 48px and lg 56px.
• emptyMessage and loading on Select and Combobox. With no options and no message, Select opens no popup. While loading, a spinner replaces the chevron and the trigger is aria-busy.
• labels on Combobox and FileUpload sets the announced and visible copy. Each key has today's English default, so an existing app keeps its wording.
• error takes a node on Input and Textarea, so a message can carry a link. error={true} with errorMessage still works.
• label is optional on DatePicker and FileUpload, and is a node when given.

Other additions: Dialog.Trigger, Dialog.Close, AlertDialog.Trigger, Popover.Close, Menu.Group, Menu.Label, TooltipProvider, Tooltip align, Button and IconButton render, IconButton size (target or compact) and appearance="text" and filled, Alert open, onOpenChange and announce, Table caption, emptyMessage, getRowKey and rowHeader, Spinner label and size (sm, md, lg), Avatar fallback, Stepper completeLabel, NavGroup renderLink and Pagination renderLink, Tab icon, and Tabs labels. InlineCode is exported from sherick-ui/content.

Three behaviours changed for existing code, and each has a reason in the design language. Avatar rest props now land on the root span, so an image-only prop such as loading no longer reaches the image. src and alt still do. Spinner className sizes the wrapper, which a bare spinner fills. Accordion draws each join as a border on its section, not as a separator role. Toasts with an action or a danger type are sticky by default.

Themes and direction

With no root data-sherick-theme, the library follows prefers-color-scheme. Set "light" or "dark" to override it. Retune --sui-* variables at the document root; nested theme islands are not supported because overlays portal to the body. The token source contains the defaults; custom accent values should pass the contrast contract in both themes and interaction states.

For RTL, set both <html dir="rtl"> and <DirectionProvider direction="rtl">. Drawer sides stay physical and CodeBlock source stays LTR.

Support

The core ships ESM and CommonJS and supports React/React DOM 18 or 19. The automated browser baseline is the pinned Playwright Chromium, Firefox and WebKit engines; shipping browser builds and older majors are not separately certified. Base UI owns generic widget behavior and accessibility; Tailwind is private styling infrastructure. Neither is a consumer API. The audited patched Base UI copy is bundled for editable Combobox focus isolation. See the release contract and design language for details.