Forms blocks

Profile, workspace and billing detail forms with the right input types, autocomplete and validation.

3 variants. Every block is one file built from CK-UI components and works in light and dark mode.

Profile form

Photo upload, names, username, bio and time zone in a two-column grid that stacks on small screens.

CK-UI components

Also copy the files they import: Command, Label, Popover, ThemeScope.

npm packages

npm install @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-slot class-variance-authority cmdk react-icons

Workspace form

Workspace name, an address with a fixed prefix, team size, visibility and a launch date.

Full preview

CK-UI components

Also copy the files they import: Calendar, Popover, ThemeScope.

npm packages

npm install @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-radio-group @radix-ui/react-select @radix-ui/react-slot class-variance-authority react-day-picker react-icons

Billing details form

Company, billing email and address with the right autocomplete tokens. No card fields: payment stays with your provider.

Full preview

CK-UI components

Also copy the files they import: Label, ThemeScope.

npm packages

npm install @radix-ui/react-label @radix-ui/react-select @radix-ui/react-slot class-variance-authority react-icons