Building a Dynamic Segmented Layout in React with Framer Motion

Creating interactive and visually appealing user interfaces is key to a great user experience. Today, we're diving into a custom React component that I've been working on: the SegmentLayout. This component allows you to build a sleek, dual-panel layout where users can switch between different content views with smooth animations.

It's perfect for feature comparisons, interactive tutorials, or any scenario where you need to present segmented information in a clean and engaging way.

Let's break down how it works and how you can use it in your own projects.

What is the SegmentLayout Component?

The SegmentLayout is a highly customizable React component that provides a structured layout with three main parts:

1. A list of clickable items on the left.
2. A list of clickable items on the right.
3. A central content area that animates between different views based on the active item.

Check out this quick demo of what it looks like in action:

How to Use It

Using the SegmentLayout is straightforward. You wrap your content views with the main SegmentLayout component and then use the SegmentLayoutContent component for each view you want to display.

Here’s a basic example:

Segment Layout | Shadix UI

pnpm dlx shadcn@latest add @shadix-ui/segment-layout

import {
    SegmentLayout,
    SegmentLayoutContent,
} from "@/components/segment-layout";

const MyComponent = () => (
    <SegmentLayout
        leftItems={[
            { label: "React", value: "react" },
            { label: "Vue", value: "vue" },
        ]}
        rightItems={[
            { label: "Svelte", value: "svelte" },
            { label: "Solid", value: "solid" },
        ]}
        defaultValue="react"
    >
        <SegmentLayoutContent value="react">
            <div>
                <h3>React</h3>
                <p>A JavaScript library for building user interfaces.</p>
            </div>
        </SegmentLayoutContent>
        <SegmentLayoutContent value="vue">
            <div>
                <h3>Vue</h3>
                <p>The Progressive JavaScript Framework.</p>
            </div>
        </SegmentLayoutContent>
        <SegmentLayoutContent value="svelte">
            <div>
                <h3>Svelte</h3>
                <p>Cybernetically enhanced web apps.</p>
            </div>
        </SegmentLayoutContent>
        <SegmentLayoutContent value="solid">
            <div>
                <h3>Solid</h3>
                <p>Simple and performant reactivity for building user interfaces.</p>
            </div>
        </SegmentLayoutContent>
    </SegmentLayout>
);

Core Features

• State Management with React Context: The active state is managed globally within the component using React Context, making it easy for child components to know which item is currently selected.
• Smooth Animations with Framer Motion: Content transitions are handled by Framer Motion, with animations for height, opacity, and position. This ensures a fluid and professional feel.
• Fully Customizable with Tailwind CSS: The component is styled with Tailwind CSS and exposes a classNames prop, allowing you to override every part of the component's appearance.
• SEO-Friendly and Accessible: The component is built with semantic HTML and ARIA attributes to ensure it's accessible and indexable.

Key Props

• leftItems & rightItems: Arrays of objects to define the clickable items. Each object requires a label and a value.
• defaultValue: The value of the item that should be active on initial render.
• children: Must be SegmentLayoutContent components.
• classNames: An object to pass custom Tailwind CSS classes to different parts of the component.

The SegmentLayoutContent component requires a value prop that corresponds to the value of an item in the leftItems or rightItems arrays.

How It Works: A Look Under the Hood

The component is split into a few key parts:

1. SegmentLayoutProvider: A React Context provider that holds the active state.
2. SegmentLayout: The main component that sets up the layout structure.
3. SegmentLayoutContentInner: The internal component that handles the rendering and animation of the content area. AnimatePresence and motion from Framer Motion are used here to achieve the smooth transitions.
4. ItemWrapper & Item: Components that render the clickable items on the left and right, with styles for active and disabled states.

The height animation is one of the coolest features. It's achieved by using a ResizeObserver to measure the height of the active content. When the active item changes, the observer detects the new height, and Framer Motion animates the container to match it.

Conclusion

The SegmentLayout component is a powerful and flexible way to create dynamic, segmented layouts in your React applications. With its simple API, smooth animations, and extensive customization options, it can help you build more engaging and intuitive user interfaces.

You can find the full documentation and demo here.

Let me know what you think in the comments below! What other features would you like to see?