Collapsible

Component 15

About

Collapsible

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Collapsible to your project and fits it to your theme.

Code

How Collapsible is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ChevronUpIcon } from 'lucide-react'

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'

const tasks = [
  {
    image: 'https://cdn.21st.dev/assets/mirror/2f/2fcafa6e39ea7272850e186aa5d39db75cba438a6a1194b908bc5a1385dd41bf.png',
    fallback: 'HL',
    name: 'Howard Lloyd',
    designation: 'Product Manager',
    percentage: 90
  },
  {
    image: 'https://cdn.21st.dev/assets/mirror/79/79d0a07346424d3ca0fd8850624b410cf9c115262b36426ef875f6dfda226242.png',
    fallback: 'OS',
    name: 'Olivia Sparks',
    designation: 'Software Engineer',
    percentage: 60
  },
  {
    image: 'https://cdn.21st.dev/assets/mirror/ec/ec81be4cc810190ce4d240fcc57295965c5cebaa8751558595ade91eb62c09a4.png',
    fallback: 'HR',
    name: 'Hallie Richards',
    designation: 'UI/UX Designer',
    percentage: 80
  },
  {
    image: 'https://cdn.21st.dev/assets/mirror/7c/7ceb72f7fcb0798a3d72f071c2bfe1251de0d16007bc9ad20f246dde57d5d092.png',
    fallback: 'JW',
    name: 'Jenny Wilson',
    designation: 'Junior Developer',
    percentage: 15
  }
]

const CollapsibleListDemo = () => {
  return (
    <Collapsible className='flex w-full max-w-[350px] flex-col items-start gap-4'>
      <div className='font-medium'>Today&apos;s task completion</div>
      <ul className='flex w-full flex-col gap-2'>
        {tasks.slice(0, 2).map(task => (
          <li key={task.name} className='flex items-start gap-4'>
            <Avatar>
              <AvatarImage src={task.image} alt={task.name} />
              <AvatarFallback>{task.fallback}</AvatarFallback>
            </Avatar>
            <div className='flex flex-1 flex-col'>
              <div className='text-sm font-medium'>{task.name}</div>
              <p className='text-muted-foreground text-xs'>{task.designation}</p>
            </div>
            <span className='text-muted-foreground text-sm'>{`${task.percentage}%`}</span>
          </li>
        ))}
        <CollapsibleContent className='flex flex-col gap-2'>
          {tasks.slice(2).map(task => (
            <li key={task.name} className='flex items-start gap-4'>
              <Avatar>
                <AvatarImage src={task.image} alt={task.name} />
                <AvatarFallback>{task.fallback}</AvatarFallback>
              </Avatar>
              <div className='flex flex-1 flex-col'>
                <div className='text-sm font-medium'>{task.name}</div>
                <p className='text-muted-foreground text-xs'>{task.designation}</p>
              </div>
              <span className='text-muted-foreground text-sm'>{`${task.percentage}%`}</span>
            </li>
          ))}
        </CollapsibleContent>
      </ul>
      <CollapsibleTrigger asChild>
        <Button variant='outline' size='sm'>
          <span className='[[data-state=open]>&]:hidden'>Show more</span>
          <span className='[[data-state=closed]>&]:hidden'>Show less</span>
          <ChevronUpIcon className='[[data-state=closed]>&]:rotate-180' />
        </Button>
      </CollapsibleTrigger>
    </Collapsible>
  )
}

export default CollapsibleListDemo