Experience System
Components

Ellipsis With Tooltip

Registry

Truncated text that only shows a tooltip when it actually overflows its container.

Truncated text with an overflow-only tooltip using Tooltip from @by/experience-system.

After shadcn add, import EllipsisWithTooltip from the path your registry aliases map to (often @/components/ui/ellipsis-with-tooltip).

A long shipment description that will overflow its container and reveal a tooltip on hover.

Installation

Run the shadcn CLI with your package manager. It vendors the recipe into components/ui/ellipsis-with-tooltip.tsx and installs the runtime dependencies (@by/experience-system) automatically:

pnpm dlx shadcn@latest add @by-es/ellipsis-with-tooltip

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system. Configure the Registry in your app before adding recipes.

Dropdown Menu

A menu opened from a button or control, for actions and settings without leaving the current view.

Empty

Centered empty-state layout for missing content, errors, and long-running tasks.

On this page

Installation