Flx

Tabs Media

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

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6

Implementation

npx shadcn@latest add @flx/tabs-media

Usage

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

export 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',
      src: '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',
      src: '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',
      src: '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',
      src: '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',
      src: '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',
      src: '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

export function TabsMediaExample() {
  return (
    <TabsMedia
      title={values.title}
      description={values.description}
      items={values.items}
    />
  )
}
Need help? Contact me
/ TwitterLinkedIn