Tabs Media

A set of tabs at the top. When you switch tabs, the corresponding image is revealed with a smooth fade transition.

Loading block…

Implementation

npx shadcn@latest add @flx/tabs-media

Usage

tabs-media-example.tsx

import { TabsMedia, type TabsMediaProps } from './tabs-media'

export function TabsMediaExample() {
  const values = {
    title: 'Built to ship faster',
    description:
      'Everything you need to build modern interfaces. From design tokens to ready-made blocks.',
    items: [
      {
        label: 'Design',
        url: 'https://images.unsplash.com/photo-1635746065098-a0ae3eadfa6f?q=80&w=1332&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      },
      {
        label: 'Components',
        url: 'https://images.unsplash.com/photo-1530912780732-0d2507ded3e8?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      },
      {
        label: 'Developer Experience',
        url: 'https://images.unsplash.com/photo-1719448683263-8424028681f2?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      },
      {
        label: 'Customization',
        url: 'https://images.unsplash.com/photo-1666529529871-a619c5a1a2b1?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      },
      {
        label: 'Performance',
        url: 'https://images.unsplash.com/photo-1551777995-e47e7ba6d1f0?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      },
      {
        label: 'Accessibility',
        url: 'https://images.unsplash.com/photo-1604181941498-d7b7acc8a160?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      },
    ],
  } satisfies TabsMediaProps

  return (
    <TabsMedia
      title={values.title}
      description={values.description}
      items={values.items}
    />
  )
}