A form dialog with a live URL preview that checks slug availability as you type, a sliding team switch and visibility cards. It shakes on invalid input, submits with Command Enter and resizes smoothly into a success state.
npx shadcn@latest add https://hyperblur.dev/r/dialog-create-project.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dialog-create-project.tsx.
import { DialogCreateProject } from "@/components/hyperblur/dialog-create-project"
<DialogCreateProject takenSlugs={existing} onSubmit={(values) => createProject(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Controlled open state. Leave undefined to let the component manage it. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. Defaults to true when embedded so the preview shows the dialog. |
| onOpenChange | (open: boolean) => void | undefined | Called whenever the dialog opens or closes. |
| embedded | boolean | false | Renders the dialog inside its parent (absolute, not fixed) without scroll lock, for previews and docs. |
| trigger | ReactNode | null | "New project" | Label of the built-in trigger button. Pass null to hide it and control the dialog with open. |
| title | string | "Create project" | Dialog heading. |
| domain | string | "acme.dev" | Domain shown before the slug built from the name. |
| teams | string[] | ["Design", "Engineering", "Growth"] | Options of the team switch. |
| takenSlugs | string[] | ["website", "api", "mobile-app"] | Slugs reported as taken by the availability check. |
| defaultName | string | "Checkout redesign" | Initial project name. |
| onSubmit | (values: { name: string; slug: string; team: string; visibility: "private" | "team" | "public" }) => void | Promise<void> | undefined | Called with the form values. Return a promise to keep the button busy. |
| accent | string | "#7c5cff" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |