Back to Components

Responsive Layout

v1.0.0
Layout

A complete responsive layout with sidebar and navbar that adapts to different screen sizes

Dependencies

framer-motion
lucide-react
@radix-ui/react-slot
class-variance-authority
Installation
Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/responsive-layout.json

Manual Installation

// 1. Install dependencies
npm install framer-motion lucide-react @radix-ui/react-slot class-variance-authority

// 2. Copy the component code to components/ui/responsive-layout.tsx

// 3. Usage example:
import { ResponsiveLayout } from "@/components/ui/responsive-layout"
import { Home, Settings } from 'lucide-react'

const sidebarItems = [
  { icon: Home, label: "Home", href: "/" },
  { icon: Settings, label: "Settings", href: "/settings" },
]

export function MyLayout() {
  return (
    <ResponsiveLayout
      sidebarItems={sidebarItems}
      brand="My App"
    >
      <div className="p-6">
        <h1>Main Content</h1>
      </div>
    </ResponsiveLayout>
  )
}
Props
Component properties and their types
sidebarItems
SidebarItem[]
default: []

Array of sidebar navigation items

navItems
NavItem[]
default: []

Array of navbar navigation items

navActions
ReactNode
default: null

Action buttons or elements for the navbar

collapsible
boolean
default: true

Whether the sidebar can be collapsed

defaultCollapsed
boolean
default: false

Initial collapsed state of the sidebar

brand
ReactNode
default: null

Brand logo or text for the navbar

children
ReactNode
default: null

Main content area

Examples
2 different usage examples

Basic Layout

import { ResponsiveLayout } from "@/components/ui/responsive-layout"
import { Home, Settings, Users, BarChart } from 'lucide-react'

const sidebarItems = [
  { icon: Home, label: "Dashboard", href: "/dashboard" },
  { icon: Users, label: "Users", href: "/users" },
  { icon: BarChart, label: "Analytics", href: "/analytics" },
  { icon: Settings, label: "Settings", href: "/settings" },
]

const navItems = [
  { label: "Overview", href: "/overview" },
  { label: "Reports", href: "/reports" },
  { label: "Help", href: "/help" },
]

export default function App() {
  return (
    <ResponsiveLayout
      sidebarItems={sidebarItems}
      navItems={navItems}
      brand="My App"
      collapsible
    >
      <div className="p-6">
        <h1 className="text-2xl font-bold">Welcome to Dashboard</h1>
        <p className="text-muted-foreground">Your main content goes here.</p>
      </div>
    </ResponsiveLayout>
  )
}

Registry

View the component registry file

View Registry
Live Preview
Interactive
2 examples available

Dashboard Overview

Card 1
Card 2
Content Area