/*@jsxRuntime automatic @jsxImportSource react*/ const {jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ div: "div", pre: "pre", code: "code", span: "span" }, props.components); return _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { className: "github-dark", style: { backgroundColor: "#24292e" }, tabIndex: "0", "data-language": "tsx", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "default", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " AtSymbolIcon," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " CreditCardIcon," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " DocumentIcon," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Square3Stack3DIcon," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Squares2X2Icon," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " UserIcon," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'@heroicons/react/24/outline'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { Sidebar, SidebarItem, SidebarContent, SidebarGroup, SidebarDivider } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"~/core/ui/Sidebar\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "AppSidebar" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Sidebar" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SidebarContent" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'py-4'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SidebarGroup" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "label" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'App'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "collapsible" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "false" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SidebarItem" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "path" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'#dashboard'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "Icon" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Square3Stack3DIcon" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'w-4'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} />}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Dashboard" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SidebarItem" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "path" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'#workspace'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "Icon" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Squares2X2Icon" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'w-4'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} />}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Workspace" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SidebarGroup" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "label" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Settings'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "collapsible" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "false" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SidebarItem" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "path" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'#profile'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "Icon" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "UserIcon" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'w-4'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} />}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Profile" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SidebarItem" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "path" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'#subscription'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "Icon" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "CreditCardIcon" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'w-4'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} />}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Subscription" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SidebarDivider" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SidebarGroup" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "label" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Help'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "collapsible" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "collapsed" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SidebarItem" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "path" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'#profile'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "Icon" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "DocumentIcon" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'w-4'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} />}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Documentation" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SidebarItem" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "path" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'#subscription'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "Icon" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "AtSymbolIcon" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'w-4'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} />}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Support" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) })] }) }) }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };

Sidebar - SaaS UI Kit

A collection of Sidebar components with Tailwind CSS.

Basic Sidebar

The Sidebar component in the Makerkit SaaS UI Kit.

Sidebar with Groups

The Sidebar component in the Makerkit SaaS UI Kit with grouped items for specific sections.