Two Column

A form split into two columns of fields with a shared header and footer actions. Use it for longer profiles or billing details that fit a wider screen.

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";

export default function TwoColumnForm() {
  return (
    <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px] py-10">
      <Card>
        <CardHeader>
          <CardTitle>Profile Settings</CardTitle>
        </CardHeader>
        <CardContent>
          <form>
            <div className="space-y-8">
              {/* Personal Information */}
              <div>
                <h3 className="text-lg font-medium">Personal Information</h3>
                <p className="text-sm text-muted-foreground">
                  Update your personal details here.
                </p>

                <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="first-name">First name</Label>
                    <Input id="first-name" placeholder="Enter first name" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="last-name">Last name</Label>
                    <Input id="last-name" placeholder="Enter last name" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input id="email" type="email" placeholder="Enter email" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="phone">Phone number</Label>
                    <Input
                      id="phone"
                      type="tel"
                      placeholder="Enter phone number"
                    />
                  </div>

                  <div className="col-span-full space-y-2">
                    <Label htmlFor="about">About</Label>
                    <Textarea
                      id="about"
                      placeholder="Write a few sentences about yourself"
                    />
                  </div>
                </div>
              </div>

              <Separator />

              {/* Address Information */}
              <div>
                <h3 className="text-lg font-medium">Address Information</h3>
                <p className="text-sm text-muted-foreground">
                  Update your shipping address.
                </p>

                <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2">
                  <div className="col-span-full space-y-2">
                    <Label htmlFor="street">Street address</Label>
                    <Input id="street" placeholder="Enter street address" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="city">City</Label>
                    <Input id="city" placeholder="Enter city" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="state">State / Province</Label>
                    <Input id="state" placeholder="Enter state" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="postal-code">ZIP / Postal code</Label>
                    <Input id="postal-code" placeholder="Enter postal code" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="country">Country</Label>
                    <Input id="country" placeholder="Enter country" />
                  </div>
                </div>
              </div>

              <div className="flex justify-end gap-4">
                <Button variant="outline">Cancel</Button>
                <Button>Save Changes</Button>
              </div>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}

About this block

Two Column is a profile settings form housed inside a card. A card header carries the "Profile Settings" title, and the body holds two named sections separated by a divider. The first section, Personal Information, arranges first name, last name, email, and phone in a two column grid, then drops a full width textarea for a short bio below them. The second section, Address Information, starts with a full width street address field, then places city, state, postal code, and country in the same two column grid. A row of Cancel and Save Changes buttons sits flush right at the bottom of the card.

Each section has its own subheading and a short description line beneath it, so the purpose of each group is clear at a glance. The copy in every label, placeholder, and subheading is plain text you can replace, and the two sections are independent enough that you can remove one or add a third without affecting the layout grid.

When to use

Reach for this block when a user needs to update structured profile data in one place. In a product analytics SaaS it works well for the account settings page where workspace members fill in their contact details and billing address in a single form rather than navigating across separate pages. It handles more fields than the stacked single column variant without feeling crowded, and it is lighter than the complex form when you do not need tabs, toggles, or a sticky action bar.

A natural flow around it on an Application page:

Before

A Page Heading to give the settings screen a title and breadcrumb before the form card
A User Profile block to show the current account state above the editable form

After

Application Stats to surface usage numbers below the settings card on the same route

What you can customize

The block holds two independent form sections inside one card, all of which can be adjusted to fit your data model:

Section titles and descriptions. Each section subheading and its supporting sentence are plain text, so you can rename them to match your domain without changing any layout code.
Field set per section. The two column grid accepts any number of labeled inputs. Add, remove, or reorder fields and the grid reflows automatically at narrow viewports.
Footer actions. The Cancel and Save Changes buttons are a plain flex row. You can swap labels, add a destructive action, or move the row to a sticky footer if the form grows long.

Tip: keep the two sections focused on one concern each so users know exactly what they are saving when they click the button.

About this block

When to use

A natural flow around it on an Application page:

Before

A Page Heading to give the settings screen a title and breadcrumb before the form card
A User Profile block to show the current account state above the editable form

After

Application Stats to surface usage numbers below the settings card on the same route

What you can customize

The block holds two independent form sections inside one card, all of which can be adjusted to fit your data model:

Section titles and descriptions. Each section subheading and its supporting sentence are plain text, so you can rename them to match your domain without changing any layout code.
Field set per section. The two column grid accepts any number of labeled inputs. Add, remove, or reorder fields and the grid reflows automatically at narrow viewports.
Footer actions. The Cancel and Save Changes buttons are a plain flex row. You can swap labels, add a destructive action, or move the row to a sticky footer if the form grows long.

Tip: keep the two sections focused on one concern each so users know exactly what they are saving when they click the button.

Two Column

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize