Dashral Pro is on the wayGet 30% off at launch

Dashral

Installation

Add components with the shadcn CLI, copy them by hand, or start from the dashboard template.

Dashral needs React 19, Tailwind CSS v4 and TypeScript. Components are copied into your project, so there's no Dashral package to install or update — the code is yours.

Set up your project

Components install with the shadcn CLI, which needs a project with Tailwind CSS, the @/* import alias and a components.json. Any style works, Radix or Base UI, and so does a project full of shadcn components: Dashral goes in a folder of its own. Already have one? Skip to the registry.

  1. Create a project

    $ pnpm create next-app@latest my-app

    Say yes to Tailwind CSS and keep the default @/* import alias.

  2. Initialize shadcn

    $ pnpm dlx shadcn@latest init

    Pick any style and preset. This writes components.json, which the CLI reads to know where files go, and adds lib/utils.ts and the theme's CSS variables.

Add the registry

Register Dashral once in components.json. After that you add components by name, e.g. @dashral/button.

components.json
{
  "registries": {
    "@dashral": "https://dashral.com/r/{name}.json"
  }
}

Prefer not to edit the config? Every component also installs from its full URL:

$ pnpm dlx shadcn@latest add https://dashral.com/r/button.json

The full theme

Components bring only the tokens they use, and leave your existing colors alone. For the whole Dashral look — light and dark palette, status colors, chart colors and motion — add the theme. It replaces your color tokens.

$ pnpm dlx shadcn@latest add https://dashral.com/r/dashral-theme.json

Add components

Add one or several at once. Everything a component needs comes along: the components it builds on, its npm packages and the theme tokens it uses.

$ pnpm dlx shadcn@latest add @dashral/button @dashral/metric-card

Components land in components/dashral/, blocks in components/dashral/blocks/, Motion editions in components/dashral/motion/ and the helpers they share in components/dashral/lib/. Your components/ui/ is never touched, so a shadcn Button and Dashral's live side by side. They're your files now: use them like any component of your own.

app/page.tsx
import { Button } from "@/components/dashral/button"

export default function Page() {
  return <Button>Save changes</Button>
}
Good to know
  • No provider needed. Every component works as soon as it's added, in any React app.
  • Links in Next.js. Components with links (Breadcrumb, Pagination, Sidebar, Bar List and the menus) render a plain <a>. Pass linkAs={Link} from next/link, or your own Link, for client-side navigation.
  • Toasts. Using toast()? Mount <Toaster /> once in your root layout.
  • Another language. Wrap your app in LocaleProvider: see Internationalization.

Copy by hand

No CLI? Every file is on the site to copy.

  1. Install the packages

    The ones every component shares; a component's page lists any others it needs.

    $ pnpm add radix-ui class-variance-authority clsx tailwind-merge lucide-react tw-animate-css

  2. Add the cn() helper

    components/dashral/lib/utils.ts
    import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

  3. Copy the theme

    Copy globals.css into your app and import it once in your root layout.

  4. Copy the component

    Open a component, switch Installation to Manual, and copy its source into components/dashral/. Its page lists the other components it imports.

Dashboard template

Starting a new admin dashboard? Clone the template: every page, component and the theme are included, with no shadcn setup. See it running. Then run pnpm dashral init once, before you change anything: it turns the demo into the start of your own app.

Terminal
git clone https://github.com/hasralgana/dashral.git my-dashboard
cd my-dashboard
pnpm install
pnpm dashral init
pnpm dev

It asks a few questions and changes the code to match. Whatever you don't keep is deleted (the other template, the sample data, the upgrade pages), links to Dashral are turned off, and your answers are saved in .dashral.json. Skip it to keep the whole demo as it is.

OptionValuesWhat it does
--templateclassic, inset, bothWhich dashboard template to keep. Inset alone moves to /.
--pagesdemo, blankThe demo pages with sample data, or a blank page and Settings to build on.
--languagesall, enEnglish, Indonesian and Arabic (right to left), or English only.
--customizerkeep, removeThe theme customizer in the header.
--name"Your App"Your app's name, everywhere the template's was: sidebar, sign-in, titles, link previews.
--primary--light--dark--card--radius--fontthe customizer's optionsThe look your app starts with.

Give the answers as flags and it asks nothing. The theme customizer in the live demo writes this command for the look you pick: Copy setup command.

Terminal
pnpm dashral init --template inset --pages blank --languages en \
  --name "Acme" --primary indigo --card soft

New releases come to the repository. Commit your work, then bring one in: it merges the release into your code the way init shaped it, keeps what you removed removed, and leaves the result staged for you to review. Where you and the release changed the same lines, it stops and lists the files; fix them and run it again with --continue. It reads .dashral.json, so keep that file.

Terminal
pnpm dashral update

Pro blocks

Pro blocks come with your license. Signed in with Pro, a Pro block's Code tab shows its whole source to copy, and every one is in your dashral-pro repository under packages/blocks/src/. They're built from the same components, so add those as above first. See what's in Pro.