March 2024 - Introducing Blocks

One of the most requested features since launch has been layouts: admin dashboards with sidebar, marketing page sections, cards and more.

Today, we're launching Blocks.

<a href="/blocks"> <Image src="/images/dashboard-1.jpg" width="716" height="430" alt="Admin dashboard" className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden" /> <Image src="/images/dashboard-1-dark.jpg" width="716" height="430" alt="Admin dashboard" className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block" /> <span className="sr-only">View the blocks library</span> </a>

Blocks are ready-made components that you can use to build your apps. They are fully responsive, accessible, and composable, meaning they are built using the same principles as the rest of the components in shadcn/ui.

We're starting with dashboard layouts and authentication pages, with plans to add more blocks in the coming weeks.

Open Source

Blocks are open source. You can find the source on GitHub. Use them in your projects, customize them and contribute back.

<a href="/blocks"> <Image src="/images/dashboard-2.jpg" width="716" height="420" alt="AI Playground" className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden" /> <Image src="/images/dashboard-2-dark.jpg" width="716" height="420" alt="AI Playground" className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block" /> <span className="sr-only">View the blocks library</span> </a>

Request a Block

We're also introducing a "Request a Block" feature. If there's a specific block you'd like to see, simply create a request on GitHub and the community can upvote and build it.

<a href="/blocks"> <Image src="/images/dashboard-3.jpg" width="716" height="420" alt="Settings Page" className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden" /> <Image src="/images/dashboard-3-dark.jpg" width="716" height="420" alt="Settings Page" className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block" /> <span className="sr-only">View the blocks library</span> </a>

v0

If you have a v0 account, you can use the Edit in v0 feature to open the code on v0 for prompting and further generation.

<div className="mt-6 flex aspect-video w-full items-center justify-center overflow-hidden rounded-lg border bg-background shadow-sm"> <svg viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-40 w-40 text-foreground" > <path d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z" fill="currentColor" ></path> <path d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z" fill="currentColor" ></path> </svg> </div>

That's it. Looking forward to seeing what you build with Blocks.