Aki UI

Expand on Hover

ホバー展開

A row of panels where the one under the pointer opens and the rest give way, revealing its label as it goes. The expansion rides on flex-grow↗↗ rather than computed widths, so the panels always fill the track exactly whatever their number, and the same component turns on its side for a vertical gallery. Built with Tailwind CSS.

Kyoto

Osaka

Nara

Kobe

Himeji

Installation

Copy and paste the following code into a new component file:1

"use client"

import { useState, type ReactNode } from "react"

export type ExpandPanel = {

id: string | number,

label: string,

content: ReactNode

}

How to use it2

"use client"

import { ExpandOnHover } from "@/components/ui/expand-on-hover"

const panels = [

{ id: 1, label: "Kyoto", content: <img src="/kyoto.jpg" alt="Kyoto" /> },

{ id: 2, label: "Osaka", content: <img src="/osaka.jpg" alt="Osaka" /> },

]

export default function Page() {

Props

ExpandOnHover

Name	Default	Description
panels	—	ExpandPanel[] The panels in the gallery
orientation	"horizontal"	"horizontal" \| "vertical" Whether panels sit in a row or a column
grow	3	number Flex grow given to the active panel, relative to 1 for the others
size	260	number Height of the row, or width of the column, in pixels
dark	false	boolean Render the dark palette

ExpandPanel (type)

Name	Default	Description
id	—	string \| number Stable key for the panel
label	—	string Caption revealed while the panel is open
content	—	ReactNode What the panel renders

Name

Default

Description

—

string | number

Stable key for the panel

label

—

string

Caption revealed while the panel is open

content

—

ReactNode

What the panel renders