@photoroom/ui

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

Install

npm install @photoroom/ui @photoroom/icons

Usage

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:

@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

• ~222 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) — full guide for all platforms (Claude Cowork, Bolt, Lovable, local)
• Storybook — browse components visually
• Source