# Design From Labs

> Experiments and production-ready React components from Design From Labs. Each component ships on three headless primitive libraries (Radix, Base UI, React Aria) and two icon sets (Lucide, Phosphor), as a shadcn registry, a CLI and an npm library. Only tested variants are published.

## Install

- shadcn, by URL: `npx shadcn@latest add https://labs.designfrom.com/r/<item>.json`
- shadcn, by namespace: add `"registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }` to components.json, then `npx shadcn@latest add @designfrom/<item>`
- CLI: `npx designfrom add <component> [--primitive radix|base|aria] [--icons lucide|phosphor] [--style <style>]` (defaults: radix, lucide); `npx designfrom list`
- npm: `npm i @designfrom/react`, then `import { Button } from "@designfrom/react/radix/button"` (Phosphor: `.../radix/button/phosphor`); styles: `@designfrom/react/styles.css`
- Item names: `<component>[-<style>][-<primitive>][-<iconset>]`, e.g. `button-radix-lucide`, `badge-subtle-phosphor`, `tooltip-aria`.

## Components

- [Badge](https://labs.designfrom.com/ui/badge): A compact status label in five tones, with a matching status icon and a subtle tinted style. Items: [badge-lucide](https://labs.designfrom.com/r/badge-lucide.json), [badge-phosphor](https://labs.designfrom.com/r/badge-phosphor.json), [badge-subtle-lucide](https://labs.designfrom.com/r/badge-subtle-lucide.json), [badge-subtle-phosphor](https://labs.designfrom.com/r/badge-subtle-phosphor.json)
- [Button](https://labs.designfrom.com/ui/button): A button with five variants, four sizes and a loading state that keeps focus and announces progress, on Radix, Base UI or React Aria. Items: [button-radix-lucide](https://labs.designfrom.com/r/button-radix-lucide.json), [button-radix-phosphor](https://labs.designfrom.com/r/button-radix-phosphor.json), [button-base-lucide](https://labs.designfrom.com/r/button-base-lucide.json), [button-base-phosphor](https://labs.designfrom.com/r/button-base-phosphor.json), [button-aria-lucide](https://labs.designfrom.com/r/button-aria-lucide.json), [button-aria-phosphor](https://labs.designfrom.com/r/button-aria-phosphor.json)
- [Tooltip](https://labs.designfrom.com/ui/tooltip): A short text hint for a control that opens on hover after a delay and on keyboard focus, and closes with Escape, on Radix, Base UI or React Aria. Items: [tooltip-radix](https://labs.designfrom.com/r/tooltip-radix.json), [tooltip-base](https://labs.designfrom.com/r/tooltip-base.json), [tooltip-aria](https://labs.designfrom.com/r/tooltip-aria.json)

## Foundations

- [composeRefs](https://labs.designfrom.com/ui/compose-refs): Combines several React refs (callbacks or objects) into one ref callback, with React 19 cleanup support. Items: [compose-refs](https://labs.designfrom.com/r/compose-refs.json)
- [Design From base](https://labs.designfrom.com/ui/designfrom-base): The whole Design From system in one install: theme tokens, the three fonts, utilities, your icon library and your primitive library. Items: [designfrom-base-radix-lucide](https://labs.designfrom.com/r/designfrom-base-radix-lucide.json), [designfrom-base-radix-phosphor](https://labs.designfrom.com/r/designfrom-base-radix-phosphor.json), [designfrom-base-base-lucide](https://labs.designfrom.com/r/designfrom-base-base-lucide.json), [designfrom-base-base-phosphor](https://labs.designfrom.com/r/designfrom-base-base-phosphor.json), [designfrom-base-aria-lucide](https://labs.designfrom.com/r/designfrom-base-aria-lucide.json), [designfrom-base-aria-phosphor](https://labs.designfrom.com/r/designfrom-base-aria-phosphor.json)
- [Design From theme](https://labs.designfrom.com/ui/designfrom-theme): The Design From Labs color, radius and focus tokens for light and dark, using shadcn's variable names. Items: [designfrom-theme](https://labs.designfrom.com/r/designfrom-theme.json)
- [Figtree](https://labs.designfrom.com/ui/font-figtree): The Figtree variable typeface as the sans-serif font (--font-sans). Items: [font-figtree](https://labs.designfrom.com/r/font-figtree.json)
- [Instrument Serif](https://labs.designfrom.com/ui/font-instrument-serif): The Instrument Serif typeface as the display serif font (--font-serif). Items: [font-instrument-serif](https://labs.designfrom.com/r/font-instrument-serif.json)
- [JetBrains Mono](https://labs.designfrom.com/ui/font-jetbrains-mono): The JetBrains Mono variable typeface as the monospace font (--font-mono). Items: [font-jetbrains-mono](https://labs.designfrom.com/r/font-jetbrains-mono.json)
- [useReducedMotion](https://labs.designfrom.com/ui/use-reduced-motion): A hook that reports whether the user prefers reduced motion and updates when the setting changes. Items: [use-reduced-motion](https://labs.designfrom.com/r/use-reduced-motion.json)

## Optional

- [Full source of every published item](https://labs.designfrom.com/llms-full.txt)
- [Registry index (shadcn registry.json)](https://labs.designfrom.com/r/registry.json)
- [Credits and licenses](https://labs.designfrom.com/credits)
- [Export contract](https://github.com/Design-from-labs/labs/blob/main/docs/contract.md)