@empathy-labs Registry

This is a shadcn component registry with Tailwind 4.0 and custom design system for Empathy React/Next.js projects.

Installation

Quick Start

1. Initialize your project with shadcn/ui:

pnpx shadcn@latest init

2. Add registry to your project's components.json file:

"registries": { "@empathy-labs": "https://labs-registry.empathy.com/r/{name}.json" }

3. Add components from our registry:

pnpx shadcn@latest add @empathy-labs/color-picker

4. (Optional) Add the custom Empathy theme to your project:

pnpx shadcn@latest add @empathy-labs/theme

Design System

This is the design system for the Empathy React/Next.js projects.

Install
pnpx shadcn@latest add @empathy-labs/theme

Typography

Empathy Headings
Large Display Text
Medium Display Text
Small Display Text
Inter Headings
Section Headers
Subsection Headers
Subsection Headers
Body Large Text
Standard Body Text
Small Body Text
Tiny Body Text
Label Text

Color Palette

Plum
Beige
Raspberry
Rose
Apricot
Orange
Earth
Aubergine
Lavender
Frost
Sky
Ocean
Forest
Grass
Mint
Corn

Custom Components

Copy to Clipboard

The copy to clipboard component is a custom component that allows you to copy text to the clipboard.

Preview
Install
pnpx shadcn@latest add @empathy-labs/copy-to-clipboard
Usage
<CopyToClipboard text="Hello, world!" />

Color Picker

The color picker component is a custom component that allows you to select a color from a palette.

Preview
Install
pnpx shadcn@latest add @empathy-labs/color-picker
Usage
<ColorPicker color="plum" onChange={() => {}} />

Player

The player component is a custom component that allows you to play an audio file.

Preview
Install
pnpx shadcn@latest add @empathy-labs/player
Usage
<Player url="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />

File Uploader

This file uploader component is a custom component that allows you to upload a file to a server.

Preview
Install
pnpx shadcn@latest add @empathy-labs/file-uploader
Usage
<Player url="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />

App Switcher

The app switcher component is a custom component that allows you to switch between labs apps.

Preview
Install
pnpx shadcn@latest add @empathy-labs/app-switcher
Usage
<AppSwitcher app="VideoLab" />