Docs
Show more

Show more

Displays a card with header, content, and footer.

Defualt

Installation

Copy and paste the following code into your project.

"use client"
 
import * as React from "react"
import { ChevronDownIcon } from "lucide-react"
 
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
 
interface ShowMoreProps {
  expanded: boolean
  onClick: () => void
}
 
const ShowMore = ({ expanded, onClick }: ShowMoreProps) => {
  return (
    <div className="flex min-h-[30px] w-[calc(100%-40px)] items-center">
      <div className="h-[1px] flex-1 translate-x-[-1px] bg-gray-alpha-400"></div>
      <div className="shrink-0">
        <Button
          size="small"
          shape="rounded"
          variant="secondary"
          onClick={onClick}
        >
          <div className="flex items-center">
            <span>{expanded ? "Show less" : "Show more"}</span>
            <ChevronDownIcon
              className={cn(
                "ml-1 h-5 w-5 transition-transform",
                expanded && "rotate-180"
              )}
            />
          </div>
        </Button>
      </div>
      <div className="h-[1px] flex-1 translate-x-[1px] bg-gray-alpha-400"></div>
    </div>
  )
}
 
export { ShowMore }

Update the import paths to match your project setup.

Usage

import { ShowMore } from "@/components/ui/show-more"
import { useState } from "react"
 
import { ShowMore } from "@/registry/default/ui/show-more"
 
export default function ShowMoreDemo() {
  const [expanded, setExpanded] = useState(false)
 
  return <ShowMore expanded={expanded} onClick={() => setExpanded(!expanded)} />
}