Save 15% on all Justd Blocks
Components

Show More

An expandable UI component that reveals hidden content on demand, optimizing space while maintaining accessibility.

Basic

The ShowMore component is primarily used to encapsulate content that can be expanded or collapsed. It renders the content as initially hidden, and it expands to show more when interacted with by the user.

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

import { IconChevronLgDown } from "justd-icons"
import { cn, ShowMore } from "ui"
 
<ShowMore>
  {({ isSelected }) => (
    <>
      Show {isSelected ? "less" : "more"}
      <IconChevronLgDown
        className={cn(
          isSelected ? "rotate-180" : "",
          "size-4 transition-transform duration-200"
        )}
      />
    </>
  )}
</ShowMore>

As Text

While the default behavior utilizes a button for interactions, the ShowMore component can also be configured to function as a clickable text element.

Or continue with

Controlled

Gain fine-grained control over the ShowMore component's behavior. This setup ensures you can manage the expanded state externally, ideal for more complex interactions.

Orientation

The default orientation for the ShowMore component is horizontal. However, it can easily be adjusted to a vertical layout to suit different design needs.

Or
Previous
Separator
Next
Visually Hidden