Introduction

Dashral is a set of React components for dashboards and the apps around them, and a free Next.js admin dashboard template built with them. Components are plain TypeScript and Tailwind CSS: you add them with the shadcn CLI (or copy them by hand) and the source lands in your project, yours to change.

Every preview on these pages runs the same source you install, so what you click here is what you get.

Components come in 12 groups: AI, Actions, Charts, Data display, Dates, Effects, Feedback, Inputs, Layout, Navigation, Overlays, Selects. Blocks put them together into whole sections and screens, each with its own data and events, ready to wire to your app.

• Accessible by default. Keyboard support and screen reader behavior are part of each component and written down on its page — no extra wiring.
• One theme. Colors, status colors, radius and motion are CSS variables shared by every component, in light and dark mode. See Theming.
• Motion that helps. Short, consistent movement from one set of tokens, and none of it when the system asks for reduced motion. 26 components also come as a Motion edition on motion/react, for where a page should feel crafted: numbers on odometer wheels, controls you drag, hold or sweep, limits you can feel. See Motion.
• Any language, either direction. The components' words, numbers and dates follow one provider, and the layout mirrors for Arabic. See Languages and RTL.
• Documented. Every component and block has live examples, an API reference, keyboard support and accessibility notes, and a Markdown version to hand an AI assistant (Copy page, at the top of each page). See AI and LLMs.

1. Install a component with the shadcn CLI, or clone the dashboard template.
2. Browse the components and try them on their pages, in Default or Motion.
3. Start a page from a block instead of from scratch.
4. Make it yours with the theme tokens.