Form Layout

shadcn-customs-ui/form-layout

FreeBlock

Composable layout primitives for building structured and responsive forms.

Live preview

live · rendered by the registry

Rendered by shadcn-customs-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://formkitcn.pro/r/form-layout.json

Source

components/forms/layout/FormLayout.tsxformkitcn.pro/r/form-layout.json

1"use client";
2 
3import type { ReactNode } from "react";
4 
5import { cn } from "@/lib/utils";
6 
7export function FormLayout({
8  children,
9  className,
10}: {
11  children: ReactNode;
12  className?: string;
13}) {
14  return (
15    <div
16      className={cn(
17        "space-y-10",
18        className
19      )}
20    >
21      {children}
22    </div>
23  );
24}

What it pulls in

Other registry items

field
button
separator

Files it writes

components/forms/layout/FormLayout.tsx
components/forms/layout/FormSection.tsx
components/forms/layout/FormGrid.tsx
components/forms/layout/InlineFieldRow.tsx
components/forms/layout/SectionDivider.tsx
components/forms/layout/FormActionBar.tsx
components/forms/layout/FieldGroup.tsx

More from shadcn-customs-ui

All 8 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Data Griddata-table-dynamic	shadcn-customs-ui	Blocks	Free	8 deps · 17 files
Login Form Templateform-dynamic-template	shadcn-customs-ui	Blocks	Free	5 deps · 7 files
Field Rendererform-field	shadcn-customs-ui	Blocks	Free	6 deps · 26 files
Form Layout Templateform-template-01	shadcn-customs-ui	Blocks	Free	3 deps
Step Formmultistep-form-template	shadcn-customs-ui	Blocks	Free	6 deps · 6 files
Redux Toolredux-methods-tool	shadcn-customs-ui	Blocks	Free	2 deps · 11 files
Theme Preset Tooltheme-preset-tool	shadcn-customs-ui	Blocks	Free	1 dep · 22 files