Shadcn UI Sidebar Card Components
Shadcn UI Sidebar Card Components - Horizon AI Boilerplate Free Shadcn UI sidebar card components from Horizon AI Boilerplate
Last 2 weeks agoPreview
Code
HTML
React
<link rel="stylesheet" href="https://boilerplate-shadcn-pro.vercel.app/_next/static/css/e4d7c44042e2fbaf.css" />
<div class="flex flex-col justify-center items-center bg-white h-[100vh]">
<div
class="mx-auto flex w-full mt-20 flex-col justify-center px-5 pt-0 md:h-[unset] md:max-w-[300px] lg:h-[100vh] lg:max-w-[300px] lg:px-6 xl:pl-0 ">
<div class="mb-9 mt-7">
<div class="flex justify-center">
<div
class="relative flex flex-col items-center rounded-lg border border-zinc-200 px-3 py-4 dark:border-white/10">
<img width="54" height="30" class="w-[54px]"
src="https://horizon-ui.com/shadcn-nextjs-boilerplate/_next/static/media/SidebarBadge.d6d6c919.png"
alt="">
<div class="mb-3 flex w-full flex-col pt-4">
<p class="mb-2.5 text-center text-lg font-bold text-zinc-950 dark:text-white">
Go
unlimited with PRO</p>
<p
class="text-center text-sm font-medium text-zinc-500 dark:text-zinc-400 focus:dark:!bg-white/20 active:dark:!bg-white/20">
Get your AI Saas Project to another level and start doing more with
Horizon AI
Boilerplate PRO!</p>
</div> <a target="_blank" href="https://horizon-ui.com/shadcn-ui#pricing"><button
class="whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 mt-auto flex h-full w-[200px] items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium">Get
started with PRO</button></a>
</div>
</div>
<div class="mt-5 flex w-full items-center rounded-lg border border-zinc-200 p-4 dark:border-zinc-800">
<a href="/shadcn-nextjs-boilerplate/dashboard/dashboard/settings"><span
class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full min-h-10 min-w-10"><img
class="aspect-square h-full w-full"
src="https://lh3.googleusercontent.com/a/ACg8ocKGiB3SX_PVR817Y_l-Dy2ybR5Z9KcT4Nm-Ek5fZeG3WS3wEFg=s96-c"></span></a><a
href="/shadcn-nextjs-boilerplate/dashboard/settings">
<p class="ml-2 mr-3 flex items-center text-sm font-semibold leading-none text-zinc-950 dark:text-white">
Horizon </p>
</a>
<form class="w-full">
<input type="hidden" value="/shadcn-nextjs-boilerplate/dashboard/ai-chat"
name="pathName"><button
class="whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground ml-auto flex h-[40px] w-[40px] cursor-pointer items-center justify-center rounded-full p-0 text-center text-sm font-medium hover:dark:text-white"
type="submit"><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24"
aria-hidden="true" class="h-4 w-4 stroke-2 text-zinc-950 dark:text-white" width="1em"
height="1em" color="inherit" xmlns="http://www.w3.org/2000/svg" style="color: inherit;">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9">
</path>
</svg></button>
</form>
</div>
</div>
</div>
</div>
Muhammad Imran
26 components