Create project
A projects list with a create dialog: the URL slug types itself in from the name with a live availability check and a free-slug suggestion, templates share a sliding selection ring, and the new project lands at the top with a highlight.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { CreateProject } from '@/components/component-kit/items/block-create-project';
export function Example() { return <CreateProject domain="app.acme.com" onCreate={(project) => console.log(project.slug)} />;}Props
| Prop | Type | Default | Description |
|---|---|---|---|
projects | Project[] | 3 demo projects | Existing projects; their slugs count as taken. |
templates | ProjectTemplate[] | Blank, SaaS dashboard, Marketing site, API service | Template cards with id, name, description and a lucide icon. |
domain | string | "acme.app/p" | Host shown in front of the slug preview. |
onCreate | (project: Project) => void | undefined | Called with the new project once it is created. |
compact | boolean | false | Inline name and slug form without the list or dialog. |
autoPlay | boolean | false | In compact mode, type a taken name, take the suggestion, then a free one. |
contentClassName | string | undefined | Class for the portalled dialog. |