Vendure Dashboard Tech Stack Overview | Vendure Docs

Tech Stack

The Vendure Dashboard is built on a modern stack of technologies that provide a great developer experience and powerful capabilities for building custom extensions.

Core Technologies

React 19

The dashboard is built with React 19, giving you access to all the latest React features including:

React Compiler optimizations
Improved concurrent features
Actions and form handling improvements
Enhanced automatic batching
Better TypeScript support
New hooks like useOptimistic and useFormStatus

Tsx

import { useOptimistic, useFormStatus } from 'react';function OptimisticUpdateExample() {    const [optimisticState, addOptimistic] = useOptimistic(state, (currentState, optimisticValue) => {        // Return new state with optimistic update        return [...currentState, optimisticValue];    });    return (        <div>            {optimisticState.map(item => (                <div key={item.id}>{item.name}</div>            ))}        </div>    );}function SubmitButton() {    const { pending } = useFormStatus();    return (        <button type="submit" disabled={pending}>            {pending ? 'Saving...' : 'Save'}        </button>    );}

TypeScript

Full TypeScript support throughout the dashboard provides:

Type safety for your custom components
IntelliSense and autocomplete in your IDE
Compile-time error checking
Generated types from your GraphQL schema

Vite 7

Vite 7 powers the development experience with:

Lightning-fast hot module replacement (HMR)
Optimized build process with Rollup 4
Modern ES modules support
Rich plugin ecosystem
Environment API for better multi-environment support

UI Framework

Tailwind CSS v4

The dashboard uses Tailwind CSS v4 for styling:

Utility-first CSS framework
Improved performance with Rust-based engine
Enhanced CSS-first configuration
Responsive design system
Built-in dark mode support
Customizable design tokens

Tsx

// Example using Tailwind classesfunction MyComponent() {    return (        <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">My Custom Component</h2>        </div>    );}

Was this chapter helpful?

Report Issue

Edited Mar 23, 2026·View source

Tsx

import { Button, Input, Card } from '@vendure/dashboard';function MyForm() {    return (        <Card className="p-6">            <Input placeholder="Enter your text" />            <Button className="mt-4">Submit</Button>        </Card>    );}

Tsx

import { useQuery } from '@vendure/dashboard';import { graphql } from '@/gql';const getProductsQuery = graphql(`    query GetProducts {        products {            items {                id                name                slug            }        }    }`);function ProductList() {    const { data, isLoading, error } = useQuery({        queryKey: ['products'],        queryFn: () => client.request(getProductsQuery),    });    if (isLoading) return <div>Loading...</div>;    if (error) return <div>Error: {error.message}</div>;    return (        <ul>            {data.products.items.map(product => (                <li key={product.id}>{product.name}</li>            ))}        </ul>    );}

Tsx

import { Link, useNavigate } from '@vendure/dashboard';function Navigation() {    const navigate = useNavigate();    return (        <div>            <Link to="/products">Products</Link>            <button onClick={() => navigate({ to: '/customers' })}>Go to Customers</button>        </div>    );}

Tsx

import { useForm, FormFieldWrapper, Input, Button } from '@vendure/dashboard';interface FormData {    name: string;    email: string;}function MyForm() {    const form = useForm<FormData>();    const onSubmit = (data: FormData) => {        console.log(data);    };    return (        <form onSubmit={form.handleSubmit(onSubmit)}>            <FormFieldWrapper                control={form.control}                name="name"                label="Name"                render={({ field }) => <Input {...field} />}            />            <FormFieldWrapper                control={form.control}                name="email"                label="Email"                render={({ field }) => <Input type="email" {...field} />}            />            <Button type="submit">Submit</Button>        </form>    );}

Tsx

import { graphql } from '@/gql';import { useMutation } from '@vendure/dashboard';const createProductMutation = graphql(`    mutation CreateProduct($input: CreateProductInput!) {        createProduct(input: $input) {            id            name            slug        }    }`);function CreateProductForm() {    const mutation = useMutation({        mutationFn: (input: CreateProductInput) => client.request(createProductMutation, { input }),    });    // TypeScript knows the exact shape of the input and response    const handleSubmit = (data: CreateProductInput) => {        mutation.mutate(data);    };    return (        // Form implementation        <div>Create Product Form</div>    );}

Tsx

import { toast } from '@vendure/dashboard';function MyComponent() {    const handleSave = async () => {        try {            await saveData();            toast.success('Data saved successfully!');        } catch (error) {            toast.error('Failed to save data', {                description: error.message,            });        }    };    // Promise-based toasts    const handleAsyncAction = () => {        toast.promise(performAsyncAction(), {            loading: 'Saving...',            success: 'Saved successfully!',            error: 'Failed to save',        });    };    return (        <div>            <button onClick={handleSave}>Save</button>            <button onClick={handleAsyncAction}>Async Save</button>        </div>    );}

Tsx

import { ShoppingCartIcon, UserIcon, SettingsIcon } from 'lucide-react';function Navigation() {    return (        <nav className="flex space-x-4">            <a href="/products" className="flex items-center">                <ShoppingCartIcon className="mr-2 h-4 w-4" />                Products            </a>            <a href="/customers" className="flex items-center">                <UserIcon className="mr-2 h-4 w-4" />                Customers            </a>            <a href="/settings" className="flex items-center">                <SettingsIcon className="mr-2 h-4 w-4" />                Settings            </a>        </nav>    );}

Tsx

import { motion } from 'motion/react';function AnimatedCard({ children }) {    return (        <motion.div            initial={{ opacity: 0, y: 20 }}            animate={{ opacity: 1, y: 0 }}            exit={{ opacity: 0, y: -20 }}            className="bg-white p-6 rounded-lg shadow"        >            {children}        </motion.div>    );}

Tsx

import { Trans, useLingui } from '@lingui/react/macro';function MyComponent() {    const { t } = useLingui();    return (        <div>            <h1>                <Trans>Welcome to Dashboard</Trans>            </h1>            <p>{t`Click here to continue`}</p>        </div>    );}

Tech Stack

Core Technologies

React 19

TypeScript

Vite 7

UI Framework

Tailwind CSS v4

Tech Stack

Core Technologies

React 19

TypeScript

Vite 7

UI Framework

Tailwind CSS v4

Vendure Design System

Data Layer: TanStack Query

Routing: TanStack Router

Forms: React Hook Form

GraphQL Integration: gql.tada

Notifications: Sonner

Icons: Lucide React

Animations: Motion

Internationalization: Lingui