Description

Description component built for React with Tailwind CSS.

Instalar

pnpm dlx shadcn@latest add https://piperubio-shadcn-registry.vercel.app/r/description.json

Framework: react

Dependencies: class-variance-authority, clsx, tailwind-merge

Registry dependencies: card

Files:

registry/ui/react/components/description/description.tsx
registry/ui/react/components/ui/card.tsx
registry/ui/react/lib/utils.ts

Piperubio Component Registry

Custom shadcn/ui component registry created and maintained by piperubio. Reusable React components with advanced features like unlimited columns, layout options, and smart spanning.

piperubioshadcn/uiTypeScriptResponsiveUnlimited ColumnsLayout Options

Flexible Layouts

Support for horizontal and vertical layouts with unlimited columns

• Horizontal layout (default grid)
• Vertical layout (stacked items)
• Up to 12 columns (no more 3-column limit)
• Smart responsive behavior

Advanced Spanning

Flexible column spanning with "filled" and responsive options

• Numeric spans (1, 2, 3, 4...12)
• "filled" span (remaining columns)
• Responsive span objects
• Auto-clamping to available columns

Two Variants

Clean basic layout and structured bordered format

• Basic: minimal, clean design
• Bordered: structured table format
• Support for nested sections
• Rich ReactNode children support

Layout Options

Horizontal Layout (Default)

Items arranged in a responsive grid - perfect for traditional key-value displays

Name:Juan Pérez

Email:juan@ejemplo.com

Phone:+1 234 567 8900

Address:123 Calle Principal, Ciudad, País (spans remaining columns)

Department:Engineering

Role:Senior DeveloperSenior DeveloperSenior DeveloperSenior Developer

Code

<Description layout="horizontal" columns={{ base: 1, md: 2, lg: 3 }}>
  <DescriptionItem label="Name">Juan Pérez</DescriptionItem>
  <DescriptionItem label="Email">juan@ejemplo.com</DescriptionItem>
  <DescriptionItem label="Phone">+1 234 567 8900</DescriptionItem>
  <DescriptionItem label="Address" span="filled">
    123 Calle Principal, Ciudad, País (spans remaining columns)
  </DescriptionItem>
  <DescriptionItem label="Department">Engineering</DescriptionItem>
  <DescriptionItem label="Role"><Badge>Senior Developer</Badge></DescriptionItem>
</Description>

Vertical Layout

Items stacked vertically - ideal for detailed information and mobile-first design

Name:Juan Pérez

Email:juan@ejemplo.com

Phone:+1 234 567 8900

Bio:Desarrollador full-stack con experiencia en React, Node.js y bases de datos. Especializado en arquitecturas modernas y desarrollo escalable.

Code

<Description layout="vertical" columns={{ base: 1, md: 2, lg: 3 }}>
  <DescriptionItem label="Name">Juan Pérez</DescriptionItem>
  <DescriptionItem label="Email">juan@ejemplo.com</DescriptionItem>
  <DescriptionItem label="Phone">+1 234 567 8900</DescriptionItem>
  <DescriptionItem label="Bio">
    Desarrollador full-stack con experiencia en React, Node.js y bases de datos.
  </DescriptionItem>
</Description>

Horizontal Layout - Bordered

Traditional grid layout with borders - perfect for structured data presentation

Server:Production Web Server

Environment:Production

Status:

Healthy

CPU Usage:65%

Memory:8.2 GB / 16 GB

Uptime:45 days

Configuration:

nginx 1.24, Node.js 20.x, PM2 cluster mode (spans remaining columns)

Code

<Description layout="horizontal" variant="bordered" columns={{ base: 1, md: 2, lg: 3 }}>
  <DescriptionItem label="Server">Production Web Server</DescriptionItem>
  <DescriptionItem label="Environment"><Badge variant="outline">Production</Badge></DescriptionItem>
  <DescriptionItem label="Status">
    <div className="flex items-center gap-2">
      <div className="w-2 h-2 bg-green-500 rounded-full"></div>
      <span>Healthy</span>
    </div>
  </DescriptionItem>
  <DescriptionItem label="CPU Usage">65%</DescriptionItem>
  <DescriptionItem label="Memory">8.2 GB / 16 GB</DescriptionItem>
  <DescriptionItem label="Uptime">45 days</DescriptionItem>
  <DescriptionItem label="Configuration" span="filled">
    <div className="w-full">
      <span className="bg-gray-50 px-3 py-2 rounded border block w-full">
        nginx 1.24, Node.js 20.x, PM2 cluster mode (spans remaining columns)
      </span>
    </div>
  </DescriptionItem>
</Description>

Vertical Layout - Bordered

Structured vertical layout with borders - perfect for configuration details

Service:Cloud Database

Plan:Professional

Status:

Active

Region:US East (Virginia)

Code

<Description layout="vertical" variant="bordered" columns={{ base: 1, md: 2, lg: 3 }}>
  <DescriptionItem label="Service">Cloud Database</DescriptionItem>
  <DescriptionItem label="Plan"><Badge variant="outline">Professional</Badge></DescriptionItem>
  <DescriptionItem label="Status">
    <div className="flex items-center gap-2">
      <div className="w-2 h-2 bg-green-500 rounded-full"></div>
      <span>Active</span>
    </div>
  </DescriptionItem>
  <DescriptionItem label="Region">US East (Virginia)</DescriptionItem>
</Description>

Advanced Spanning & Unlimited Columns

"Filled" Span Usage

Using span="filled" to occupy all remaining columns in the current row

Name:María González

Email:maria@company.com

Department:Marketing

Full Bio:Marketing professional with 8+ years of experience in digital campaigns, brand management, and team leadership. Specialized in B2B marketing strategies and customer acquisition. (This spans all remaining columns automatically)

Skills:React, TypeScript

Location:Barcelona

Code

<Description layout="horizontal" columns={{ base: 1, md: 3, lg: 4 }}>
  <DescriptionItem label="Name">María González</DescriptionItem>
  <DescriptionItem label="Email">maria@company.com</DescriptionItem>
  <DescriptionItem label="Department">Marketing</DescriptionItem>
  <DescriptionItem label="Full Bio" span="filled">
    Marketing professional with 8+ years of experience... (spans remaining columns)
  </DescriptionItem>
  <DescriptionItem label="Skills">React, TypeScript</DescriptionItem>
  <DescriptionItem label="Location">Barcelona</DescriptionItem>
</Description>

Extended Column Support (Up to 12 Columns)

Demonstrating 6-column layout with various spans - no more 3-column limit!

ID:USR001

Name:Alex Johnson

Email:alex@tech.com

Phone:+1-555-0123

Department:Engineering

Team:Frontend

Address:456 Tech Street, Innovation District, Silicon Valley, CA 94043 (spans 4 columns)

Status:Active Employee (spans 2 columns)

Skills:

ReactTypeScriptAstroTailwindNode.jsPostgreSQL(spans all remaining columns)

Code

<Description layout="horizontal" columns={{ base: 2, md: 4, lg: 6 }}>
  <DescriptionItem label="ID">USR001</DescriptionItem>
  <DescriptionItem label="Name">Alex Johnson</DescriptionItem>
  <DescriptionItem label="Email">alex@tech.com</DescriptionItem>
  <DescriptionItem label="Phone">+1-555-0123</DescriptionItem>
  <DescriptionItem label="Department">Engineering</DescriptionItem>
  <DescriptionItem label="Team">Frontend</DescriptionItem>
  
  <DescriptionItem label="Address" span={4}>
    456 Tech Street, Innovation District, Silicon Valley, CA 94043 (spans 4 columns)
  </DescriptionItem>
  <DescriptionItem label="Status" span={2}>
    <Badge>Active Employee (spans 2 columns)</Badge>
  </DescriptionItem>

  <DescriptionItem label="Skills" span="filled">
    <div className="flex flex-wrap gap-1">
      <Badge>React</Badge>
      <Badge>TypeScript</Badge>
      {/* ... more badges */}
    </div>
  </DescriptionItem>
</Description>

Responsive Spanning with Breakpoint Objects

Using responsive span objects to control spanning across different screen sizes

Project:E-commerce Platform

Status:In Progress

Priority:High

Description:Modern e-commerce solution with advanced features (responsive span: base=filled, md=2, lg=3)

Lead:Sarah Wilson

Technologies:

AstroPrismaStripe(responsive: base/md=filled, lg=2)

Budget:$50K

Timeline:Q1 2025

Team Size:5 developers

Code

<Description layout="horizontal" columns={{ base: 1, md: 3, lg: 5 }}>
  <DescriptionItem label="Project">E-commerce Platform</DescriptionItem>
  <DescriptionItem label="Status"><Badge>In Progress</Badge></DescriptionItem>
  <DescriptionItem label="Priority">High</DescriptionItem>
  
  {/* Responsive spanning: base=filled, md=2, lg=3 */}
  <DescriptionItem 
    label="Description" 
    span={{ base: "filled", md: 2, lg: 3 }}
  >
    Modern e-commerce solution with advanced features
  </DescriptionItem>
  
  <DescriptionItem label="Lead">Sarah Wilson</DescriptionItem>
  
  {/* Responsive spanning: base/md=filled, lg=2 */}
  <DescriptionItem 
    label="Technologies" 
    span={{ base: "filled", md: "filled", lg: 2 }}
  >
    <div className="flex flex-wrap gap-1">
      <Badge>Astro</Badge>
      <Badge>Prisma</Badge>
      <Badge>Stripe</Badge>
    </div>
  </DescriptionItem>
  
  <DescriptionItem label="Budget">$50K</DescriptionItem>
  <DescriptionItem label="Timeline">Q1 2025</DescriptionItem>
  <DescriptionItem label="Team Size">5 developers</DescriptionItem>
</Description>

Bordered Variant Examples

Complex Service Configuration

Detailed service configuration with sections and advanced spanning in bordered format

Service Name:Advanced Analytics Service

Plan:Enterprise

Region:US West (Oregon)

Status:

Running

Created At:2024-01-15 10:30:00 UTC (spans 2 columns)

Last Updated:2024-09-20 14:22:15 UTC (spans 2 columns)

Technical Specifications:

Database

PostgreSQL 15

Memory

32 GB RAM

Storage

1 TB SSD

CPU

8 vCPUs

Network Configuration

VPC: vpc-12345678

Subnet: subnet-abcd1234

Security Group: sg-xyz789

Load Balancer: alb-production-main

Backup & Monitoring

Backup Schedule: Daily at 2:00 AM UTC

Retention: 30 days

Monitoring: CloudWatch + Grafana

Alerts: Slack + Email notifications

Code

<Description variant="bordered" columns={{ base: 1, md: 2, lg: 4 }}>
  <DescriptionItem label="Service Name">Advanced Analytics Service</DescriptionItem>
  <DescriptionItem label="Plan"><Badge variant="outline">Enterprise</Badge></DescriptionItem>
  <DescriptionItem label="Region">US West (Oregon)</DescriptionItem>
  <DescriptionItem label="Status">
    <div className="flex items-center gap-2">
      <div className="w-2 h-2 bg-green-500 rounded-full"></div>
      <span>Running</span>
    </div>
  </DescriptionItem>

  <DescriptionItem label="Created At" span={2}>
    2024-01-15 10:30:00 UTC (spans 2 columns)
  </DescriptionItem>
  <DescriptionItem label="Last Updated" span={2}>
    2024-09-20 14:22:15 UTC (spans 2 columns)
  </DescriptionItem>

  <DescriptionItem label="Technical Specifications" span="filled">
    <div className="grid grid-cols-4 gap-4">
      <div><div className="font-medium">Database</div><div>PostgreSQL 15</div></div>
      <div><div className="font-medium">Memory</div><div>32 GB RAM</div></div>
      {/* ... more specs */}
    </div>
  </DescriptionItem>

  <DescriptionSection label="Network Configuration">
    <div className="space-y-2">
      <div><span className="font-medium">VPC:</span> vpc-12345678</div>
      {/* ... more config */}
    </div>
  </DescriptionSection>
</Description>

Complete API Reference

Component Props

Description Props

PropTypeDefaultDescription

variant"basic" | "bordered""basic"Visual style variant

layout"horizontal" | "vertical""horizontal"Layout direction for items

columnsResponsiveColumnsConfig{ base: 1, md: 2, lg: 3 }Responsive columns (unlimited, up to 12)

classNamestring?-Additional CSS classes

DescriptionItem Props

PropTypeDefaultDescription

labelstring-Field label

childrenReactNode-Field content (any React element)

spannumber | "filled" | ResponsiveSpan1Column span (1-12, "filled", or responsive object)

classNamestring?-Additional CSS classes

DescriptionSection Props

PropTypeDefaultDescription

labelstring-Section label

childrenReactNode-Section content

classNamestring?-Additional CSS classes

New Features

Layout Options

layout="horizontal" (default): Items arranged in responsive grid
layout="vertical": Items stacked vertically, full width

Unlimited Columns

No more 3-column limit! Use up to 12 columns with full Tailwind CSS support.

"Filled" Spanning

span="filled": Automatically spans all remaining columns in the current row.

Responsive Spans

Use responsive objects: span={{ base: "filled", md: 2, lg: 3 }}

Best Practices

✓ Do

• Use layout="vertical" for mobile-first or detailed information

• Use layout="horizontal" for traditional key-value displays

• Use span="filled" for content that should span remaining space

• Leverage responsive spanning for complex layouts

• Use up to 12 columns for complex data grids

• Mix basic and bordered variants appropriately

• Use ReactNode children for rich content (badges, icons, etc.)

✗ Don't

• Mix variants within the same logical section

• Use too many columns on small screens

• Overcomplicate simple data with too many columns

• Forget that spans are automatically clamped to available columns

• Use vertical layout when horizontal would be more readable

• Ignore responsive considerations when using multiple columns