Chakra UI Vue - Chidori Starter Template

Chakra UI Vue - Chidori Starter Template is a boilerplate for Vue 3 applications that pairs the Chakra UI component library with Vite, TypeScript, component auto-importing, and static site generation.

What is the Chakra UI Vue - Chidori Starter Template?

This starter template wires the alpha release of @chakra-ui/vue-next into a Vite-based Vue 3 project. It takes a fresh Vue application and adds Chakra UI's design system, TypeScript support, automatic component registration, and SSG so developers can skip the manual integration work. The template is hosted on GitHub under the codebender828 repository and is deployable to Vercel in one click. It includes example pages for a home page and a dashboard, as shown in the repository screenshots.

Key Features

• Vue 3 with TypeScript — The project is built on Vue 3 and ships with TypeScript configuration, including shims for .vue imports so type checking works in editors.
• Vite with SSG — Vite serves as the bundler, and static site generation is enabled, letting you prerender pages for faster loads.
• Components auto-import — Vue components are auto-imported, removing the need for manual import statements in every file.
• Dark mode ready — Dark mode support is configured out of the box.
• Gradients and CSS variables — The Chakra UI theme is extended with gradient utilities and CSS custom properties.
• Feather icons — Feather icons are pre-installed and ready to use in components.
• Custom theming API — The template exposes a custom component theming API and supports custom variants for components.
• Component style overrides — Default component styles can be overridden, which is useful for brand-specific design tweaks.

Who is it for?

• Vue 3 developers who want to start with Chakra UI without configuring the integration themselves.
• Design-system-focused teams that need dark mode, gradients, and custom theming wired into a build system.
• Developers deploying static sites who want SSG on Vite and a one-click Vercel deployment.

Use cases

• Scaffolding a Chakra UI app — Start a new project with a complete Chakra UI setup, including theming and icon support.
• Building a marketing site or dashboard — Use the included home and dashboard pages as a foundation for content sites or admin interfaces.
• Experimenting with Chakra UI Vue — Since the template uses an alpha of @chakra-ui/vue-next, it's a sandbox for testing Chakra's Vue components.

FAQ

Is this template production-ready?

The template relies on an alpha release of @chakra-ui/vue-next, so APIs may change before a stable release. It's suitable for learning and prototyping, but you should monitor upstream changes before using it in production.

Which editor setup is recommended?

VSCode with Vetur works, with vetur.experimental.templateInterpolationService enabled. If you use script setup syntax, the template suggests Volar instead of Vetur for proper IDE support.

Does the template include TypeScript support?

Yes, the template is configured with TypeScript, and it includes shims for .vue imports. For complete prop types, you can install @vuedx/typescript-plugin-vue when using Vetur, or switch the TS plugin on in Volar.

Can I deploy this to Vercel?

Yes, the repository includes a "Deploy with Vercel" link that sets up a new project with the template, a project name, and a demo URL automatically.