Shadcn UI Dark Mode Sidebar Component - Horizon AI Boilerplate

"="" r="" n="" \="" >\r\n="" <\="" head>\r\n\r\n="" <body="" <div\r\n="" flex-col="" justify-center="" items-center="" bg-zinc-950="" h-max="" min-h-[100vh]="" pb-5\"\r\n="" flex="" w-full="" mt-10="" px-5="" pt-0="" md:h-[unset]="" md:max-w-[80%]="" lg:h-[90vh]="" lg:max-w-[80%]="" lg:px-6="" xl:pl-0\"\r\n="" \r\n="" border="" max-h-[700px]="" bg-card="" text-card-foreground="" shadow-sm="" mx-auto="" h-[96.5vh]="" w-[330px]="" overflow-hidden="" !rounded-lg="" pe-4="" border-zinc-800="" \"\r\n="" position:="" relative;\r\n="" overflow:="" hidden;\r\n="" width:="" 100%;\r\n="" height:="" pe-1="" xl:!-mr-8="" xl:w-[calc(100%_+_20px)]\"\r\n="" absolute;\r\n="" inset:="" 0px;\r\n="" scroll;\r\n="" margin-right:="" margin-bottom:="" -22px;\r\n="" <div="" h-full="" justify-between\">\r\n="" <div>\r\n="" justify-center\">\r\n="" h-[40px]="" w-[40px]="" rounded-md="" bg-white="" text-zinc-950\"\r\n="" <svg\r\n="" stroke="\"currentColor\"\r\n" fill="\"currentColor\"\r\n" stroke-width="\"0\"\r\n" viewbox="\"0" 0="" 24="" 24\"\r\n="" aria-hidden="\"true\"\r\n" w-5\"\r\n="" height="\"1em\"\r\n" width="\"1em\"\r\n" xmlns="\"http:\/\/www.w3.org\/2000\/svg\"\r\n" <path\r\n="" fill-rule="\"evenodd\"\r\n" d="\"M14.615" 1.595a.75.75="" 1="" .359.852l12.982="" 9.75h7.268a.75.75="" .548="" 1.262l-10.5="" 11.25a.75.75="" 1-1.272-.71l1.992-7.302h3.75a.75.75="" 1-.548-1.262l10.5-11.25a.75.75="" .913-.143z\"\r\n="" clip-rule="\"evenodd\"\r\n" ><\="" path>\r\n="" svg>\r\n="" div>\r\n="" <h5\r\n="" text-2xl="" font-bold="" leading-5="" text-white\"\r\n="" horizon="" ai\r\n="" h5>\r\n="" rounded-full="" font-semibold="" transition-colors="" focus:outline-none="" focus:ring-2="" focus:ring-ring="" focus:ring-offset-2="" my-auto="" w-max="" px-2="" py-0.5="" text-xs="" border-none="" bg-zinc-800="" free\r\n="" mt-8="" h-px="" bg-white\="" 10\"\r\n="" <ul>\r\n="" max-w-full="" justify-between="" rounded-lg="" py-3="" pl-8="" font-medium="" text-zinc-400\"\r\n="" <a\r\n="" href="https://www.creative-tim.com/"//shadcn-nextjs-boilerplate//dashboard//main/"/r/n" 0px;="" 100%\"\r\n="" justify-center\"\r\n="" mr-3="" mt-1.5="" h-4="" w-4="" stroke-2="" text-inherit\"\r\n="" stroke-linecap="\"round\"\r\n" stroke-linejoin="\"round\"\r\n" 12="" 8.954-8.955c.44-.439="" 1.152-.439="" 1.591="" 0l21.75="" 12m4.5="" 9.75v10.125c0="" .621.504="" 1.125="" 1.125h9.75v-4.875c0-.621.504-1.125="" 1.125-1.125h2.25c.621="" 1.125.504="" 1.125v21h4.125c.621="" 1.125-.504="" 1.125-1.125v9.75m8.25="" 21h8.25\"\r\n="" <p\r\n="" text-sm="" main="" dashboard\r\n="" p>\r\n="" a>\r\n="" 3v1.5m4.5="" 8.25h3m18="" 0h-1.5m4.5="" 12h3m18="" 0h-1.5m-15="" 3.75h3m18="" 0h-1.5m8.25="" 19.5v21m12="" 3v1.5m0="" 15v21m3.75-18v1.5m0="" 15v21m-9-1.5h10.5a2.25="" 2.25="" 2.25-2.25v6.75a2.25="" 0-2.25-2.25h6.75a2.25="" 4.5="" 6.75v10.5a2.25="" 2.25zm.75-12h9v9h-9v-9z\"\r\n="" ai="" chat\r\n="" cursor-not-allowed="" font-medium\"\r\n="" 3.94c.09-.542.56-.94="" 1.11-.94h1.093c.55="" 1.02.398="" 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142="" 1.205-.108l.737-.527a1.125="" 1.45.12l.773.774c.39.389.44="" 1.002.12="" 1.45l-.527.737c-.25.35-.272.806-.107="" 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94="" 1.109v1.094c0="" .55-.397="" 1.02-.94="" 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107="" 1.204l.527.738c.32.447.269="" 1.06-.12="" 1.45l-.774.773a1.125="" 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55="" 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125="" 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125="" .12-1.45l.773-.773a1.125="" 1.45-.12l.737.527c.35.25.807.272="" 1.204.107.397-.165.71-.505.78-.929l.15-.894z\"\r\n="" 12a3="" 3="" 1-6="" 6="" 0z\"\r\n="" profile="" settings\r\n="" 8.25h19.5m2.25="" 9h19.5m-16.5="" 5.25h6m-6="" 2.25h3m-3.75="" 3h15a2.25="" 19.5="" 4.5h-15a2.25="" 0-2.25="" 2.25v10.5a2.25="" 19.5z\"\r\n="" subscription\r\n="" 14.25v-2.625a3.375="" 3.375="" 0-3.375-3.375h-1.5a1.125="" 13.5="" 7.125v-1.5a3.375="" 0-3.375-3.375h8.25m0="" 12.75h7.5m-7.5="" 3h12m10.5="" 2.25h5.625c-.621="" 0-1.125.504-1.125="" 1.125v17.25c0="" 1.125h12.75c.621="" 1.125-1.125v11.25a9="" 9="" 0-9-9z\"\r\n="" landing="" page\r\n="" 6v12m-3-2.818.879.659c1.171.879="" 3.07.879="" 4.242="" 1.172-.879="" 1.172-2.303="" 0-3.182c13.536="" 12.219="" 12.768="" 12c-.725="" 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303="" 0-3.182s2.9-.879="" 4.006="" 0l.415.33m21="" 12a9="" 1-18="" 18="" pricing="" ul>\r\n="" 6px;\r\n="" transition:="" opacity="" 200ms;\r\n="" opacity:="" 0;\r\n="" right:="" 2px;\r\n="" bottom:="" left:="" border-radius:="" 3px;\r\n="" display:="" none;\r\n="" block;\r\n="" cursor:="" pointer;\r\n="" inherit;\r\n="" background-color:="" rgba(0,="" 0,="" 0.2);\r\n="" max-width:="" background:="" transparent;\r\n="" top:="" 15px;\r\n="" 235px;\r\n="" transform:="" translatey(0px);\r\n="" <p="" text-white="" mt-20="" w-max\">\r\n="" sidebar="" dark="" mode="" component="" from\r\n="" target="\"_blank\"\r\n" font-bold\"\r\n="" >horizon="" boilerplate<\="" a\r\n="" body>\r\n<\="" html>","author_type":"app\\user","author_id":11240,"collection_id":null,"fork_id":null,"votes":2,"score":"5.0","visits":1207,"popularity":135,"slug":"shadcn-ui-dark-mode-sidebar-component-horizon-ai-boilerplate","approved":1,"created_at":"2024-09-16t00:00:00.000000z","updated_at":"2024-11-13t06:08:16.000000z","downloads":14,"code_views":201,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\="" cdn.tailwindcss.com","should_tweet":0,"media":[{"id":12658,"model_type":"app\\component","model_id":7163,"collection_name":"preview","name":"temp74286","file_name":"temp74286.png","mime_type":"image\="" png","disk":"public","size":21220,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp74286___media_library_original_1280_957.png","temp74286___media_library_original_1070_800.png","temp74286___media_library_original_895_669.png"],"base64svg":"data:image\="" svg+xml;base64,pcfet0nuwvbfihn2zybqvujmsumgii0vl1czqy8vrfreifnwryaxljevl0voiiaiahr0cdovl3d3dy53my5vcmcvr3jhcghpy3mvu1zhlzeums9eveqvc3znmteuzhrkij4kphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6ly93d3cudzmub3jnlze5otkvegxpbmsiihhtbdpzcgfjzt0ichjlc2vydmuiihg9ijaicib5psiwiib2awv3qm94psiwidagmti4mca5ntcipgojpgltywdlihdpzhropsixmjgwiibozwlnahq9ijk1nyigegxpbms6ahjlzj0izgf0ytppbwfnzs9qcgvno2jhc2u2ncwvowovnefbuvnrwkpsz0fcqvffqvlbqmdbquqvl2dbn1exskzrvljqvwpvz1oyuxrhbkjswnlcmk1tnhdjq2gxyzjsdvp5qkpta2nnu2xcrlj5qjjprefwtencegrxrnnhwfi1suqwz09uqusvoxnbuxdbrefnsurbz0leqxdnrejbturcqvvjqlfvrujbvutcd2nhq0f3s0rbd0xdz3nmrfe0u0vbme9futrmq3hbv0vcrvrgqlvwrlf3uez4z1dgqmdtrkjvvs85c0frd0veqkfrrkjbvupcuvvkrkewtersuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvlzhbquvrz0fhqufnqxdfukfbsvjbuu1sqwyvrufcoefbquvgqvffqkfrrujbqufbqufbqufbqujbz01fqlfzsenba0tdly9fquxvuufbsujbd01dqkfnrkjruuvbqufczlffq0f3quvfuvvtsvrgqkjotljzuwnpy1jrewdar2hdq05dc2nfvlv0shdkre5py29jsknowvhhqmthslnzbktda3forfuytnpnnu9rtkvsvvpiu0vss1uxulzwbgrzv1zwalphvm1ammhwyw5omgrywjnlsgw2zzrtrmhvzulpwxftazvtvmxwzvltwnfpbzztbhbxzw9xyxf5czdtmxryztr1ynjddzhurnhzzkl5y3jtmdluvjf0zlkyzhjonhvqazvlym42t25xogzmejlqwdi5l2o1k3yvrufcoejbqu1cqvffqkfrrujbuuvbqufbqufbqujbz01fqlfzsenba0tdly9fquxvukfbsujbz1ffqxdrsejruuvbquvdzhdbqkfntvjcqvvotvfzu1fwruhzwevuswplqkncuknryud4d1frak0xthdgv0p5mffvv0pevghkzkvyr0jryuppy29lu28xtmpjne9ucersrvzhujboslnstlvwvlpyv0zsyvkyumxabwrvyvdwemrivjjkm2g1zw9lrghjv0donglkaxblvgxkv1dsnwlabxflanblv21wnmlwcxjlenrmvzj0n2k1dxnmrhhnwed4ogpkexrmvdfowfcxowpamnvmajvpwg01k2pwnnzmejlqwdi5l2o1k3yvyufbd0rbuufdrvfnukfeoeevu2l2vfbqsxl4qnbytehqugvnqmfaqvvbtxfxv0xuskzdqwrwrujrqw0yz3nnvufmuvfmlzlrpsi+cgk8l2ltywdlpgo8l3n2zz4=""}},"order_column":6,"created_at":"2024-09-16T11:37:00.000000Z","updated_at":"2024-09-16T11:37:01.000000Z","conversions_disk":"public","uuid":"bcc3e40a-611e-41e6-af99-ef35f2dead77","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/12658\/temp74286.png","preview_url":""}],"author":{"id":11240,"name":"vldmihalache","slug":"vldmihalache","bio":"Co-founder" and="" cto="" of="" ui.\r\nhttps:\="" horizon-ui.com","avatar":"\="" storage\="" avatars\="" 6gqyxte71l3147pgi8zcicj48igisrjaowkpjkwq.jpg","header":null,"created_at":"2023-03-01t10:21:52.000000z","updated_at":"2023-03-01t12:58:58.000000z"},"tags":[{"id":32,"name":{"en":"sidebar"},"description":"the="" is="" used="" to="" show="" a="" list="" menu="" items="" multi-level="" dropdown="" on="" either="" side="" the="" page="" navigate="" your="" web="" app.="" see="" below="" our="" collection="" sidebars="" that="" you="" can="" add="" directly="" tailwind="" ui="" project.","meta_description":"visit="" examples="" project="" for="" showing="" items","slug":{"en":"sidebar"},"type":null,"order_column":31,"created_at":"2022-08-31t14:22:37.000000z","updated_at":"2022-12-21t11:02:00.000000z","pivot":{"taggable_type":"app\\component","taggable_id":7163,"tag_id":32}}],"fork":null,"favorites":[{"id":11240,"name":"vldmihalache","slug":"vldmihalache","bio":"co-founder="" 6gqyxte71l3147pgi8zcicj48igisrjaowkpjkwq.jpg","header":null,"created_at":"2023-03-01t10:21:52.000000z","updated_at":"2023-03-01t12:58:58.000000z","pivot":{"component_id":7163,"user_id":11240}},{"id":11242,"name":"fredycraciun","slug":"fredycraciun","bio":"co-founder="" creator="" ui.\r\nweb="" designer="" &="" developer.\r\nhttps:\="" horizon-ui.com","avatar":"https:\="" pbs.twimg.com\="" profile_images\="" 1611026227258691588\="" nvskzaf1_normal.jpg","header":null,"created_at":"2023-03-01t12:25:14.000000z","updated_at":"2023-03-01t12:55:22.000000z","pivot":{"component_id":7163,"user_id":11242}}]}"="" :edit="false"> Full screen Preview

Download