Phototab

Renders a tabbed interface with images and icons. Tabs switch content and highlight the active tab. Use for displaying multiple image-based sections in a compact layout.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/phototab

npx layro-cli add @educlopez/phototab

npx layro-cli add @educlopez/phototab

bunx layro-cli add @educlopez/phototab

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import {
  Content as TabsContent,
  List as TabsList,
  Root as TabsRoot,
  Trigger as TabsTrigger,
} from "@radix-ui/react-tabs";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useLayoutEffect, useRef, useState } from "react";

/**
 * Tab definition for Phototab
 */