# Wisty UI

> React components with Salesforce Lightning's look (SLDS 2), served as a shadcn registry for Radix and Base UI projects. Every item below links to its docs as Markdown.

Wisty UI is a shadcn registry, not an npm package. Add it to the `registries` in the project's components.json as `"@wisty": "https://ui.wisty.ai/r/{style}/{name}.json"`, then install an item with `npx shadcn@latest add @wisty/<name>`. The CLI fills in `{style}` from components.json, so a Radix project gets Radix files and a Base UI project gets Base UI files. Primitives keep shadcn's file names, exports, props and variant names.

Add the theme once with `npx shadcn@latest add @wisty/cosmos` (or `@wisty/lightning-blue`, `@wisty/neutral`). It writes the theme into the `:root` and `.dark` rules of the stylesheet components.json names as `tailwind.css`; components never change the stylesheet. To import the theme by hand instead, as in Salesforce's React template, whose components.json names a stylesheet that isn't there, add these lines after the Tailwind import, with paths from that stylesheet, and remove the stylesheet's own `:root` and `.dark` rules. In a Vite app's `src/index.css`:

```css
@import "./styles/wisty/tokens.css";
@import "./styles/wisty/cosmos.css";
```

Read an item's page before writing code with it. Its When to use and When not to use sections say whether it fits, and its examples and API reference say how to use it. Each page is for Radix projects; add `?base=base` for Base UI. Use only the names listed here.

Coding agents can install the wisty-ui skill, which teaches this workflow: `npx skills add https://ui.wisty.ai --skill wisty-ui`, or read https://ui.wisty.ai/skill.md. Wisty UI's MCP server, at https://ui.wisty.ai/mcp, searches and reads the same docs.

## Components

- [Accordion](https://ui.wisty.ai/accordion.md): Stacks titled sections that expand to show content, one or several at a time.
- [Alert](https://ui.wisty.ai/alert.md): Tells people about part of the page, with an icon, a title and an action. Also the page-wide banner.
- [Alert dialog](https://ui.wisty.ai/alert-dialog.md): Asks a question people must answer before going on, like confirming a delete.
- [Avatar](https://ui.wisty.ai/avatar.md): Shows a person or record as a picture or initials.
- [Badge](https://ui.wisty.ai/badge.md): Labels a status or a count in a short chip.
- [Breadcrumb](https://ui.wisty.ai/breadcrumb.md): Shows where a page sits in a hierarchy, with links back up.
- [Button](https://ui.wisty.ai/button.md): Runs an action on the page, like Save, Edit or New.
- [Button group](https://ui.wisty.ai/button-group.md): Joins related buttons into one control, like a record's Edit, Clone and More.
- [Calendar](https://ui.wisty.ai/calendar.md): Shows a month of days to pick a date or a range.
- [Card](https://ui.wisty.ai/card.md): Groups related content and actions in a titled container.
- [Carousel](https://ui.wisty.ai/carousel.md): Shows one image panel at a time, with dots or arrows to move between them.
- [Chart](https://ui.wisty.ai/chart.md): Draws bar, line, area, donut, scatter and funnel charts. One config names each series and its color, and the tooltip and legend read it.
- [Chart legend](https://ui.wisty.ai/chart-legend.md): Lists a chart's series with their values beside it, or the sizes of its bubbles.
- [Checkbox](https://ui.wisty.ai/checkbox.md): Turns one option on or off, or shows a mixed state for a group.
- [Collapsible](https://ui.wisty.ai/collapsible.md): Shows and hides a block of content from a trigger, like a record's details.
- [Combobox](https://ui.wisty.ai/combobox.md): Filters a list of options as you type, for one value or several shown as pills.
- [Command](https://ui.wisty.ai/command.md): Jumps to records, pages and commands from the keyboard, filtering as you type. For a form field, use Select or Combobox.
- [Context menu](https://ui.wisty.ai/context-menu.md): Opens a menu of actions on right-click, like on a file tile or a list row.
- [Data table](https://ui.wisty.ai/data-table.md): Shows records in a table that sorts, selects, runs row actions and loads more. Formats typed columns: currency, percent, dates, links, addresses.
- [Date picker](https://ui.wisty.ai/date-picker.md): Picks a day, typed in the field or chosen from a calendar under it. Holds a day with no time, like a Date field.
- [Datetime picker](https://ui.wisty.ai/datetime-picker.md): Picks a date and a time, typed or chosen from a calendar and a list. Holds a local date and time, like a Date/Time field.
- [Dialog](https://ui.wisty.ai/dialog.md): Opens a window over the page for a short task or a message that needs an answer.
- [Dropdown menu](https://ui.wisty.ai/dropdown-menu.md): Opens a menu of actions or options from a button, like a record's row actions.
- [Dual listbox](https://ui.wisty.ai/dual-listbox.md): Picks several options by moving them from one list to another, in order. For a short list of choices, use Checkbox or Combobox.
- [Dynamic icon](https://ui.wisty.ai/dynamic-icon.md): Shows a small animated status, like a calculation running or a score's strength. For an indefinite wait, use Spinner.
- [Empty](https://ui.wisty.ai/empty.md): Says a list, table or panel has nothing in it yet, and what to do next.
- [Expandable section](https://ui.wisty.ai/expandable-section.md): Opens and closes a titled section of a page from its gray title bar. Closed content stays mounted, hidden.
- [Field](https://ui.wisty.ai/field.md): Lays out a form control with its label, help text and error.
- [File selector](https://ui.wisty.ai/file-selector.md): Picks files with an Upload Files button or by dropping them on the field. The app uploads the files it picks.
- [Hover card](https://ui.wisty.ai/hover-card.md): Previews a linked record or person while the pointer rests on the link.
- [Icon](https://ui.wisty.ai/icon.md): Shows a Salesforce icon. Object icons sit on their own color, and utility icons take the text color.
- [Input](https://ui.wisty.ai/input.md): Takes a single line of text.
- [Input group](https://ui.wisty.ai/input-group.md): Puts icons, text or buttons inside an input or textarea.
- [Item](https://ui.wisty.ai/item.md): Shows one entry as a row with an icon, a title, a description and actions.
- [Kbd](https://ui.wisty.ai/kbd.md): Shows a key or a keyboard shortcut, like Ctrl S.
- [Label](https://ui.wisty.ai/label.md): Names a form control.
- [Linear scale](https://ui.wisty.ai/linear-scale.md): Picks one number from a row, like 0 to 10, with words under the two ends. For stars or hearts, use Rating.
- [Lookup](https://ui.wisty.ai/lookup.md): Picks records from a search, one in the field or several as pills. Searches records you pass, or a search you run.
- [Markdown](https://ui.wisty.ai/markdown.md): Shows markdown text as formatted prose, like an AI answer or summary. People can't edit it, and embedded HTML shows as text.
- [Menubar](https://ui.wisty.ai/menubar.md): Keeps a row of menus on screen, like an editor's File, Edit and View.
- [Metric](https://ui.wisty.ai/metric.md): Shows one number with its name, a unit and a trend colored good or bad.
- [Native select](https://ui.wisty.ai/native-select.md): Picks one option with the browser's own select.
- [Number input](https://ui.wisty.ai/number-input.md): Enters a quantity, an amount or a percent in the locale's number format. Leave out the minus and plus buttons for a number nobody steps.
- [Output field](https://ui.wisty.ai/output-field.md): Shows a field's label and formatted value read-only, with an edit pencil.
- [Page header](https://ui.wisty.ai/page-header.md): Titles a page with its icon, actions, meta text and key details. For a record or a list, start from Record header or List view header.
- [Page regions](https://ui.wisty.ai/page-regions.md): Gives a page the layout of a Lightning page template: a header, then regions. The template sets the columns and where they stack.
- [Pagination](https://ui.wisty.ai/pagination.md): Moves between pages of a long list.
- [Path](https://ui.wisty.ai/path.md): Shows a record's stages as chevrons, with the current one and an action.
- [Pill](https://ui.wisty.ai/pill.md): Shows a removable token for a record or a selected value, alone or in a list.
- [Popover](https://ui.wisty.ai/popover.md): Shows details or a short form in a panel anchored to a trigger. The page stays usable behind it.
- [Progress](https://ui.wisty.ai/progress.md): Shows how far a task has come, from 0 to 100%.
- [Progress indicator](https://ui.wisty.ai/progress-indicator.md): Shows the steps of a wizard or setup flow and which one people are on. For a record's stages, use Path.
- [Progress ring](https://ui.wisty.ai/progress-ring.md): Shows how much of a task is done as a small ring that fills from 0 to 100. For a value against a target, use Gauge.
- [Radio group](https://ui.wisty.ai/radio-group.md): Picks exactly one option from a short list that stays visible.
- [Rating](https://ui.wisty.ai/rating.md): Picks a score from a row of stars or other icons that fill up to the choice. To show a score, use Gauge.
- [Scroll area](https://ui.wisty.ai/scroll-area.md): Scrolls its content in a fixed-size box, with slim scrollbars.
- [Select](https://ui.wisty.ai/select.md): Picks one value from a short list in a dropdown, as a picklist does.
- [Separator](https://ui.wisty.ai/separator.md): Draws a thin line between groups of content.
- [Sheet](https://ui.wisty.ai/sheet.md): Slides a panel in from the edge of the screen for a task beside the page.
- [Sidebar](https://ui.wisty.ai/sidebar.md): Lays out an app's side navigation, with groups, a header and a footer. Collapses, and becomes a sheet on small screens.
- [Skeleton](https://ui.wisty.ai/skeleton.md): Holds the place of content while it loads.
- [Slider](https://ui.wisty.ai/slider.md): Picks a number or a range by dragging a thumb along a track.
- [Sonner](https://ui.wisty.ai/sonner.md): Shows brief, non-blocking messages, like a saved record or a failed request.
- [Spinner](https://ui.wisty.ai/spinner.md): Shows that something is loading.
- [Switch](https://ui.wisty.ai/switch.md): Turns a setting on or off at once.
- [Table](https://ui.wisty.ai/table.md): Shows rows of data in columns, read-only. For sorting, selection and row actions, use Data table.
- [Tabs](https://ui.wisty.ai/tabs.md): Switches between panels of related content.
- [Textarea](https://ui.wisty.ai/textarea.md): Takes text over several lines, like a description or a comment.
- [Time picker](https://ui.wisty.ai/time-picker.md): Picks a time of day, typed in the field or chosen from a list of times. Holds a time with no date, like a Time field.
- [Toggle](https://ui.wisty.ai/toggle.md): Stays pressed until it's pressed again, like Bold in a text editor.
- [Toggle group](https://ui.wisty.ai/toggle-group.md): Joins toggles in a row, one or several pressed, like Day, Week and Month.
- [Tooltip](https://ui.wisty.ai/tooltip.md): Shows a short hint about a control while it has hover or keyboard focus.
- [Tree](https://ui.wisty.ai/tree.md): Shows a hierarchy people open level by level and pick one item from. For rows with columns, use Data table.
- [Visual picker](https://ui.wisty.ai/visual-picker.md): Picks one or several options shown as large cards with an icon or text. For plain choices, use Radio group or Checkbox.

## Blocks

- [Activity timeline](https://ui.wisty.ai/activity-timeline.md): A record's tasks, events, calls and emails in time order, with their details. The Activity tab of a record page.
- [KPI row](https://ui.wisty.ai/kpi-row.md): A dashboard's header row: key figures on one card, each with its change.
- [List view](https://ui.wisty.ai/list-view.md): A list of records: list views, search and a table to sort and select. Lightning's object home, for a standard or custom object.
- [List view header](https://ui.wisty.ai/list-view-header.md): The top of a list page, where people switch list views, search and act. The header of Lightning's object home, for a standard or custom object.
- [Metric trend](https://ui.wisty.ai/metric-trend.md): A dashboard's lead chart: metrics as tabs, the selected one's trend below. Each can compare with an earlier period.
- [Record detail](https://ui.wisty.ai/record-detail.md): A record's Details tab, read-only, for a standard or custom object. Same field descriptions as Record form and Record inline edit.
- [Record form](https://ui.wisty.ai/record-form.md): Lightning's New and Edit record form, with required checks and save errors. The app does the saving.
- [Record header](https://ui.wisty.ai/record-header.md): The top of a record page: its name, key fields and actions. Lightning's highlights panel, for a standard or custom object.
- [Record inline edit](https://ui.wisty.ai/record-inline-edit.md): A record's Details tab, edited in place with a pencil, Cancel and Save. The app does the saving.
- [Record page](https://ui.wisty.ai/record-page.md): A record page for a standard or custom object, with its header, tabs and sidebar. A page file you edit, with no props.
- [Related list](https://ui.wisty.ai/related-list.md): A record's related records of one kind, with New and View All. Lightning's related list, for a standard or custom object.

## Charts

- [Bar list](https://ui.wisty.ai/bar-list.md): Ranks labeled values with a bar under each on one scale, with shares of a total. Rows can link to records or toggle to filter a page.
- [Gauge](https://ui.wisty.ai/gauge.md): Shows one value against a maximum, as a dial, a ring, a bar or a row of dots. Optional ranges color the scale.

## Docs

- [Installation](https://ui.wisty.ai/docs/installation.md): Install Wisty UI's components with the shadcn CLI, into any React project that uses shadcn/ui, including Salesforce's React templates for Multi-Framework apps.
- [Theming](https://ui.wisty.ai/docs/theming.md): Pick Cosmos, Lightning Blue or Neutral with an attribute on the root element, add the `dark` class for dark mode, then override the tokens.
- [Radix or Base UI](https://ui.wisty.ai/docs/radix-or-base-ui.md): Wisty UI ships every component on Radix and Base UI, each with the API shadcn gives it.
- [Agent setup](https://ui.wisty.ai/docs/agents.md): Install the Wisty UI skill, connect the MCP server or paste a rules block, so your agent reads each component's docs before it writes code.

## Optional

- [License](https://ui.wisty.ai/docs/license.md): Free items are MIT. Theme values from Salesforce's design system, shadcn's components and Salesforce's icons keep their own terms, listed here.
- [MCP server](https://ui.wisty.ai/docs/mcp.md): Connect your coding agent to Wisty UI's MCP server. It searches the components and returns their docs and install steps.