# @photoroom/ui

Photoroom design system — ~302 React components, icons, and styles.

## Install

```bash
npm install @photoroom/ui @photoroom/icons
```

## Usage

```tsx
import { Button, Tooltip } from "@photoroom/ui";
import { SparklesIcon } from "@photoroom/icons";
import "@photoroom/ui/styles.css";

function App() {
  return (
    <Tooltip content="Generate with AI">
      <Button variant="primary">
        <SparklesIcon /> Generate
      </Button>
    </Tooltip>
  );
}
```

### Extending the design system on Tailwind v4

If your app is on Tailwind v4 and you want to extend our tokens/utilities in your own CSS:

```css
@import "tailwindcss";
@import "@photoroom/ui/theme.css";
```

`theme.css` exposes every `@theme` token, `@utility`, and `@custom-variant` from the design system. `animations.css` is published separately for opt-in keyframes/animations.

## What's included

- **~302 React components** — buttons, inputs, dialogs, dropdowns, navigation, cards, editor tools, and more
- **Compiled CSS** — all Tailwind styles in a single `styles.css` import
- **TypeScript declarations** — full type safety out of the box
- **Tailwind v4 source** — extend our tokens/utilities in your own CSS via `@import "@photoroom/ui/theme.css"`

## Links

- [Setup guide (Notion)](https://www.notion.so/photoroom/Using-the-Photoroom-Design-System-in-AI-Built-Projects-306a0f7f3eee809dad6dd59d37215e99) — full guide for all platforms (Claude Cowork, Bolt, Lovable, local)
- [Storybook](https://photoroom-design-system.vercel.app) — browse components visually
- [Source](https://github.com/Photoroom/photoroom.com/tree/main/packages/ui)