React Sidebar Lite

A lightweight, animated, and highly customizable sidebar component for React, built with Tailwind CSS and Framer Motion.

react-sidebar-lite provides a simple and elegant solution for creating collapsible navigation sidebars. It's designed to be easy to use, yet flexible enough for various use cases.

Features

• Lightweight: Minimal dependencies and a small footprint.
• Animated: Smooth collapse and expand animations powered by Framer Motion.
• Customizable: Style the components using Tailwind CSS utility classes. Override default styles with your own.
• Composable: Built with a clear and composable API.
• TypeScript Support: Written in TypeScript with type definitions included.
• Icon Support: Easily add icons from libraries like lucide-react.

Installation

npm install react-sidebar-lite framer-motion lucide-react
# or
yarn add react-sidebar-lite framer-motion lucide-react

Note: react, react-dom, framer-motion, and lucide-react are peer dependencies.

Usage

First, you need to import the CSS file in your application's entry point:

import 'react-sidebar-lite/dist/styles.css';

Then, you can use the Sidebar component and its sub-components:

import React from 'react';
import { Sidebar } from 'react-sidebar-lite';
import { LayoutDashboard, Settings, User, LogOut, Home } from 'lucide-react';

export default function App() {
  return (
    <div className="flex h-screen bg-gray-50">
      <Sidebar>
        {/* Header */}
        <div className="flex h-16 items-center justify-center border-b border-gray-200 p-4">
           <div className="h-8 w-8 rounded bg-blue-600" />
        </div>

        <Sidebar.Toggle />

        <div className="flex-1 overflow-y-auto py-4">
          <Sidebar.Section>
            <Sidebar.Item icon={<Home size={20} />} text="Home" />
            <Sidebar.Item icon={<LayoutDashboard size={20} />} text="Dashboard" active />
          </Sidebar.Section>

          <Sidebar.Section title="Management">
            <Sidebar.Item icon={<User size={20} />} text="Users" />
            <Sidebar.Item icon={<Settings size={20} />} text="Settings" alert />
          </Sidebar.Section>
        </div>

        <div className="border-t border-gray-200 p-2">
          <Sidebar.Item icon={<LogOut size={20} />} text="Logout" />
        </div>
      </Sidebar>

      <main className="flex-1 p-8">
        <h1 className="text-2xl font-bold">Content Area</h1>
        <p className="mt-2 text-gray-600">Resize the window or click the toggle to test.</p>
      </main>
    </div>
  );
}

Components

<Sidebar>

The main container for the sidebar. It's a nav element that controls the expanded/collapsed state.

| Prop | Type | Default | Description | | --- | --- | --- | --- | | children | ReactNode | - | The content of the sidebar. | | defaultExpanded | boolean | true | The initial expanded state. | | expanded | boolean | - | Controlled expanded state. | | onExpandedChange| (expanded: boolean) => void | - | Callback for when the expanded state changes. | | className | string | - | Additional classes for the nav element. |

<Sidebar.Item>

A clickable item inside the sidebar. It's a button element.

| Prop | Type | Description | | --- | --- | --- | | icon | ReactNode | An icon to display next to the text. | | text | string | The text to display. | | active | boolean | If true, applies active styles. | | alert | boolean | If true, shows a small alert dot. | | onClick | () => void| Callback for when the item is clicked. | | className | string | Additional classes for the button element. |

<Sidebar.Section>

A component to group sidebar items. It's a div element.

| Prop | Type | Description | | --- | --- | --- | | title | string | An optional title for the section. | | children| ReactNode | The content of the section, usually Sidebar.Items. | | className| string | Additional classes for the div element. |

<Sidebar.Toggle>

A button to toggle the sidebar's expanded/collapsed state.

| Prop | Type | Description | | --- | --- | --- | | className | string | Additional classes for the button element. |

Customization

You can customize the sidebar's appearance using Tailwind CSS. The default styles are defined with CSS variables, which you can override.

For example, to change the width of the expanded sidebar, you can define --rs-width-expanded in your own CSS file:

:root {
  --rs-width-expanded: 300px;
}

Here are the available CSS variables:

| Variable | Default | Description | | --- | --- | --- | | --rs-width-expanded | 260px | Width of the expanded sidebar. | | --rs-width-collapsed| 64px | Width of the collapsed sidebar. |

You can also override the component styles by targeting the rs- prefixed classes in your own CSS.

License

This project is licensed under the MIT License - see the LICENSE file for details.