Section - HapplyUI

A two-column section layout for organizing form fields and content with a descriptive header.

Installation

bunx @happlyui/cli@latest add section

Dependencies

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils

Usage

import * as Section from "@/components/ui/section"

// Composed (recommended)
<Section.Composed title="Title" description="Description">
  {children}
</Section.Composed>

// Namespace
<Section.Root>
  <Section.Header>
    <Section.Title>Title</Section.Title>
    <Section.Description>Description</Section.Description>
  </Section.Header>
  <Section.Content>
    {children}
  </Section.Content>
</Section.Root>

Examples

Composed

Simplified single-component API with title and description as props.

Enter your business details

Share the key details about your business so buyers can understand the opportunity.

E.g., Prairie Coffee Co.

Select a category

Where is the business located?

<Section.Composed
  title="Enter your business details"
  description="Share the key details about your business."
>
  {children}
</Section.Composed>

Default

Standard two-column section with title, description, and form content using namespace pattern.

Enter your business details

Share the key details about your business so buyers can understand the opportunity.

E.g., Prairie Coffee Co.

Select a category

Where is the business located?

What year was the business founded?

<Section.Root>
  <Section.Header>
    <Section.Title>Enter your business details</Section.Title>
    <Section.Description>Share the key details about your business.</Section.Description>
  </Section.Header>
  <Section.Content>
    {children}
  </Section.Content>
</Section.Root>

Custom Header Width

Section with a narrower header column.

Short header

Narrower left column.

Content area

Another field

<Section.Root>
  <Section.Header className="w-[200px]">
    <Section.Title>Short header</Section.Title>
    <Section.Description>Narrower left column.</Section.Description>
  </Section.Header>
  <Section.Content>{children}</Section.Content>
</Section.Root>

API Reference

Section.Composed

Composed version — renders the full section from props.

Prop	Type	Default	Description
`title`	`string`	-	The section title
`description`	`string`	-	The section description
`headerClassName`	`string`	-	Additional classes for the header column
`contentClassName`	`string`	-	Additional classes for the content area

Section.Root

The outer container with white background and rounded corners.

Prop	Type	Default	Description
`className`	`string`	-	Additional classes for the root container

Section.Header

The left-side header column (fixed 286px width by default).

Prop	Type	Default	Description
`className`	`string`	-	Override width or other styles

Section.Title

The section title text.

Prop	Type	Default	Description

Section.Description

The section description text.

Prop	Type	Default	Description

Section.Content

The right-side content area that fills remaining space.

Prop	Type	Default	Description