Updated
Fold Tabs
NewCustomize
Auto
Breakpoint480px
Duration0.45s
Radius18px
Installation
npx shadcn@latest add https://uibrik.com/r/fold-tabs.jsonInstall the packages
npm install @tabler/icons-react motion react-use-measureAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/fold-tabs/fold-tabs.tsx"use client"; import { IconChevronDown } from "@tabler/icons-react"; import { AnimatePresence, LayoutGroup, MotionConfig, motion, useReducedMotion, } from "motion/react"; import { Fragment, useEffect, useId, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode, } from "react"; import useMeasure from "react-use-measure"; import { cn } from "@/lib/utils"; export type FoldTabsItem = {
Adds the files to
components/uibrik/fold-tabs and installs @tabler/icons-react, motion and react-use-measure. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/fold-tabs.Usage
import { FoldTabs } from "@/components/uibrik/fold-tabs/fold-tabs";const items = [ { value: "overview", label: "Overview", content: "A lightweight shell in recycled nylon that packs into its own pocket. Wind and light rain stay out; heat doesn't stay in.", }, { value: "specs", label: "Specs", content: ( <dl className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-1"> <dt>Weight</dt> <dd className="text-foreground">212 g</dd> <dt>Shell</dt> <dd className="text-foreground">Recycled nylon, 20D</dd> <dt>Packed</dt> <dd className="text-foreground">14 × 9 cm</dd> </dl> ), }, // …2 more];<FoldTabs items={items} mode="auto" breakpoint={480} duration={0.45} radius={18} // value="…" // onValueChange={(value) => {}} // defaultValue="…"/>Props
FoldTabs- mode
- Type "auto" | "tabs" | "accordion"
- "auto"
- Auto folds to an accordion below the breakpoint. Tabs or Accordion pins one layout.
- breakpoint
- Type number
- 480
- Container width below which Auto folds to an accordion.
- duration
- Type number
- 0.45
- Length of the fold and of each tab change.
- radius
- Type number
- 18
- Corner radius of the track. Rows and the tab pill follow it.
- itemsrequired
- Type { value: string; label: string; content: ReactNode }[]
- –
- Sections, in order. Content renders as the tab panel or the accordion body.
- value / onValueChange
- Type string / (value) => void
- –
- Controlled active item. Folding and unfolding keep it.
- defaultValue
- Type string
- first item
- Active item on mount when uncontrolled.
- className
- Type string
- –
- Classes for the wrapper.
