Side Bordered Collapsible

A collapsible panel with a colored bar down one side to mark its state. Use it for alerts or notes whose details readers can show or hide on demand.

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useState } from 'react';

export default function SideBorderedCollapsible() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="mx-auto max-w-md py-6">
      <Collapsible
        className={cn(
          'w-full transition-all duration-300',
          isOpen ? 'border-l-border border-l-4 pl-4' : 'border-l-0 pl-0'
        )}
        open={isOpen}
        onOpenChange={setIsOpen}
      >
        <div className="border-b pb-1">
          <CollapsibleTrigger className="hover:text-foreground/80 flex w-full items-center justify-between py-3 transition-colors">
            <span className="font-medium">Return Policy</span>
            {isOpen ? (
              <ChevronUp className="h-4 w-4 shrink-0 transition-transform duration-200" />
            ) : (
              <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
            )}
          </CollapsibleTrigger>
        </div>
        <CollapsibleContent>
          <div className="text-muted-foreground py-3 text-sm">
            <p>
              We accept returns within 30 days of purchase. Items must be in
              original condition with tags attached.
            </p>
            <p className="mt-2">
              Refunds will be processed within 5-7 business days after we
              receive your return.
            </p>
          </div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

About this block

Side Bordered Collapsible is a single expandable panel. A trigger row sits above a bottom border and shows a heading on the left with a chevron on the right that swaps direction when the panel opens. When expanded, a vertical bar appears on the left edge of the entire block, and the hidden content drops in below the trigger as a block of small, muted text.

The heading, the body copy, and the number of paragraphs inside the expanded region are all yours to change. The side bar and chevron behavior are driven by open state, so you do not need to wire anything up yourself. The block works as a standalone unit and can sit inside a list of similar panels without any wrapper.

When to use

Reach for this block on a logistics or delivery platform wherever a policy, status detail, or condition needs to stay out of the way until a user asks for it. The side bar gives a clear visual anchor that something is active, which makes it a better fit than a plain text toggle when the expanded content carries real weight, such as a return window, a delivery exception notice, or a carrier SLA. Nearby alternatives in the collapsible group suit grouped settings or step by step flows; this one is best for a single self-contained disclosure.

A natural flow around it on a Components page:

Before

Alerts to surface a status message that leads into the expandable detail below
Badges to label the item whose policy or condition the panel explains

After

Grouped Collapsible when several related policies need to live side by side
Cards to wrap a summary view once the user has read the expanded detail

What you can customize

The block is a single panel so swapping its parts is straightforward:

Trigger label. Replace the heading text with any short label that names the detail being hidden, such as a deadline, a rule, or a status.
Body paragraphs. Add or remove paragraphs inside the expanded region; the panel grows to fit whatever you place there.
Panel placement. Drop the block into any column or card; the max width constraint keeps it readable but can be removed to fill its container.

Tip: keep the expanded text to two or three short paragraphs so the side bar stays proportionate and the panel closes without a jarring scroll.

About this block

When to use

A natural flow around it on a Components page:

Before

Alerts to surface a status message that leads into the expandable detail below
Badges to label the item whose policy or condition the panel explains

After

Grouped Collapsible when several related policies need to live side by side
Cards to wrap a summary view once the user has read the expanded detail

What you can customize

The block is a single panel so swapping its parts is straightforward:

Trigger label. Replace the heading text with any short label that names the detail being hidden, such as a deadline, a rule, or a status.
Body paragraphs. Add or remove paragraphs inside the expanded region; the panel grows to fit whatever you place there.
Panel placement. Drop the block into any column or card; the max width constraint keeps it readable but can be removed to fill its container.

Tip: keep the expanded text to two or three short paragraphs so the side bar stays proportionate and the panel closes without a jarring scroll.

Side Bordered Collapsible

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize