Ui Sidebar React

A lightweight, customizable React sidebar component with essential navigation features.

Features

• 🎨 Customizable colors for all elements
• 🖥️ Logo support
• 🔘 Built-in logout functionality
• 🟠 Active item highlighting
• 🔳 Configurable border radius
• 📱 Responsive design

Install React Icons

First you should have to install react-icons cause this sidebar uses react icons

npm i react-icons

Install Sidebar

npm i ui-sidebar-react

Usage

import './App.css'
import { GrBundle } from 'react-icons/gr'
import { useState } from 'react'
import Sidebar from './assets/Sidebar'
import { FaGithub, FaHome } from 'react-icons/fa'
import { MdDashboard } from 'react-icons/md'

function App() {
  const [showSidebar, setShowSidebar] = useState(true)
  const dataItems = [
    {
      text: "My Package",
      icon: MdDashboard,
      subLinks: [
        { text: "NPM", link: "https://www.npmjs.com/package/ui-sidebar-react", icon: FaHome },
        { text: "GitHub", link: "https://github.com", icon: FaGithub }
      ]
    },
    {
      text: "GitHub",
      icon: GrBundle,
      link: "https://github.com"
    },
   
  ];

  return (
    <>
      <Sidebar 
        isOpen={showSidebar} 
        tileColor='white' 
        bgColor='orange' 
        items={dataItems} 
        radius='10px'
        textColor='black'
        logo={'/vite.svg'} 
      />
    </>
  )
}

export default App