Meet your new building blocks.

DesignMyUI is compatible with the shadcn registry format. Start in a React project with TypeScript and a configured shadcn installation.

1. Set up shadcn

pnpm dlx shadcn@latest init

Follow the prompts for your existing project. See the official setup instructions for your framework.

2. Add a component

pnpm dlx shadcn@latest add https://designmyui.dev/r/aurora-button

3. Make it yours

import { AuroraButton } from '@/components/aurora-button';

export default function Page() {
  return <AuroraButton onClick={() => console.log('clicked')}>
    Make it happen
  </AuroraButton>;
}

If you use interactive components in a Next.js page, put them inside a client component with 'use client'. The registry component itself declares its client boundary where needed.

Keep the source

The free source is MIT licensed. You can modify it, keep it in your repository, and use it without a subscription. Read the license.