Compatibility

shadcn/create lets you pick a style, a component library and an icon library for your project. Every block works with all of them, and installs without edits.

Use Customize in the sidebar to preview blocks with your setup. The preview, the code and the install command all follow your choice.

StylesCopy Anchor Link

Vega, Nova, Maia, Lyra, Mira, Luma, Sera and Rhea all work. Blocks are built from your own card, button, badge and other components, so they pick up your style's spacing, radius and density. Blocks only set the layout and colours that belong to them.

ColoursCopy Anchor Link

Charts, meters and other data use your theme's chart colours, starting at --chart-2 and ending with --chart-1, the lightest, so they follow the chart colour you picked in shadcn/create. Status has fixed colours, the same in every block: emerald for success, amber for warnings, red for errors and sky for information, with orange between amber and red in longer severity scales. Status always has an icon or a label as well.

Component librariesCopy Anchor Link

Base UI, Radix UI and React Aria are all supported. Where the libraries differ, for example Base UI's render prop and Radix's asChild, each block is published once per library.

Install blocks by name, and the shadcn CLI picks the build for your component library:

npx shadcn@latest add @dashboardblocks/kpi-01

@dashboardblocks is listed in the shadcn registry directory, so there's nothing to set up. The first install adds the registry to your components.json:

{
  "registries": {
    "@dashboardblocks": "https://www.dashboardblocks.com/r/{style}/{name}.json"
  }
}

The CLI fills in {style} from your project. On an older version of the CLI that doesn't read the directory, add these lines yourself.

Registry URLsCopy Anchor Link

You can also install a block from its URL:

URLs without a library, such as https://www.dashboardblocks.com/r/kpi-01.json, are Base UI.

RoutersCopy Anchor Link

By default, the links in the App Shell, Page Header, Notifications and Onboarding blocks are plain <a> elements, so blocks work in any React app. With a client-side router, pass its link to LinkProvider once, near the root, and those links navigate without reloading the page. LinkProvider comes with the blocks that need it.

Next.js's Link takes href, so pass it as it is, from a client component:

'use client'

import NextLink from 'next/link'

import { LinkProvider } from '@/components/dashboardblocks/link'

export function Providers({ children }: { children: React.ReactNode }) {
  return <LinkProvider component={NextLink}>{children}</LinkProvider>
}

With typedRoutes on, Next.js's Link only takes known routes, so wrap it and pass href as a Route:

'use client'

import type { Route } from 'next'
import NextLink from 'next/link'

import { type LinkProps, LinkProvider } from '@/components/dashboardblocks/link'

function Link({ href, ...props }: LinkProps) {
  return <NextLink href={href as Route} {...props} />
}

export function Providers({ children }: { children: React.ReactNode }) {
  return <LinkProvider component={Link}>{children}</LinkProvider>
}

For a router whose link takes to, such as React Router, wrap it so it takes href:

import { Link as RouterLink } from 'react-router'

import { type LinkProps, LinkProvider } from '@/components/dashboardblocks/link'

function Link({ href, ...props }: LinkProps) {
  return <RouterLink to={href} {...props} />
}

export function Providers({ children }: { children: React.ReactNode }) {
  return <LinkProvider component={Link}>{children}</LinkProvider>
}

The App Shell and Page Header mark the current page from the pathname you pass them. Pass your router's, such as Next.js's usePathname(), so the active link follows navigation. The mobile sidebar and the notifications panel close when one of their links is followed.

With React Aria, the App Shell's sidebar, menu and breadcrumb links are React Aria links, which navigate through its RouterProvider. Wrap your app in both.

Icon librariesCopy Anchor Link

Lucide, Tabler Icons, HugeIcons, Phosphor Icons and Remix Icon all work. Blocks name each icon in every library, and the shadcn CLI keeps the one in your components.json. Blocks don't add an icon package: they use the one your project already has.

Blocks that take an icon as a prop, such as Icon or the usage meters, take an element, so pass one from any library:

<Icon icon={<DatabaseIcon />} size='sm' />