catalogs.dev[BETA]
Explore

Explore on your own or with your coding agent. Choose the pieces you like, add your instructions, and let your agent build from there.

Start a linked session

How it works

Two ways to start. Your choices either way.

Cart

Explore at your own pace.

Collect items as you browse, add instructions, then copy a prompt for your agent when you’re ready.

Linked session

Explore with your agent.

Your agent brings together possibilities for your project. Open the linked session, choose your picks, and send them back with instructions.

Real files

Make it part of your project.

  • Your agent puts it where it belongs.

    Next to the components you already have, named the way you name things.

  • Adapted to your code.

    Your agent works with your imports, your helpers, and the conventions you already use.

  • Dependencies only when needed.

    The chart needed one library. The toggle used your Switch.

pricing-toggle.tsx

  1. import { Switch } from "@/components/ui/switch"
  2. import { useState } from "react"
  3. import { cn } from "@/lib/utils"
  5. export function PricingToggle() {
  6. const [yearly, setYearly] = useState(false)
  7. return (
  8. <label className="flex items-center gap-3">
  9. <span>Monthly</span>
  10. <Switch checked={yearly} onCheckedChange={setYearly} />
  11. <span>Yearly</span>
  12. </label>
  13. )
  14. }

3 files placed2 imports rewritten1 dependency added

For teams

Help people discover and choose your work.

Put your components, screens, and themes in front of people exploring on their own or with their coding agents. Let them see what you’ve made and choose it for their projects.

Publishing is invite only during the beta.