Bring @dev-dga into an existing app.

#Set up the stylesheet

Import @dev-dga/css once. With Tailwind v4, declare the cascade layers first so the library sits between Tailwind’s base and its utilities, then add the token bridge for bg-primary, text-ink, and the rest of the DGA scale.

npm i @dev-dga/react @dev-dga/css @dev-dga/tokens

/* resources/css/app.css (Laravel) or app/globals.css (Next.js) */@layer theme, base, ddga-base, ddga-components, components, utilities;@import 'tailwindcss/theme.css' layer(theme);@import 'tailwindcss/utilities.css' layer(utilities);@import '@dev-dga/css';@import '@dev-dga/css/tailwind.css';/* keep your own @source lines */@source '../views';

Keep your own @source lines. The library ships its own reset, so Tailwind preflight is optional. Styling with Tailwind

#Wrap the app in DgaProvider

DgaProvider sets the direction, the locale, the DGA font, and light or dark mode through data-theme. Portaled overlays such as Modal, Select, and DatePicker render inside it, so they inherit the theme and direction.

// resources/js/app.tsx (Inertia)import { createInertiaApp } from '@inertiajs/react';import { createRoot } from 'react-dom/client';import { DgaProvider } from '@dev-dga/react';createInertiaApp({  setup({ el, App, props }) {    createRoot(el).render(      <DgaProvider dir="rtl" locale="ar" mode="light">        <App {...props} />      </DgaProvider>,    );  },});

#Pick the components

Each need maps to one or more @dev-dga components. Labels, helper text, and errors are props on the field itself, so you don’t wire ids by hand.

All components

#Router links

Components that render a link or a menu button take asChild, so an Inertia or Next.js <Link> becomes the element itself: one focusable element, client-side navigation, and the active styles from isActive.

import { Link, usePage } from '@inertiajs/react';import { Button, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@dev-dga/react';<Button asChild>  <Link href="/requests/new">New request</Link></Button>export function NavMain({ items }: { items: { title: string; href: string }[] }) {  const { url } = usePage();  return (    <SidebarMenu>      {items.map((item) => (        <SidebarMenuItem key={item.href}>          <SidebarMenuButton asChild isActive={url.startsWith(item.href)}>            <Link href={item.href}>{item.title}</Link>          </SidebarMenuButton>        </SidebarMenuItem>      ))}    </SidebarMenu>  );}

#Forms

Every form control submits through FormData when you give it a name, so plain forms, Inertia <Form>, React Router actions, and server actions work without extra wiring.

Read the Forms guide

#Coming from another Tailwind UI kit

Replace the kit in one step rather than running both. Kits such as shadcn/ui, which the Laravel and Next.js starter kits ship, define Tailwind theme names like --color-primary and --color-border in an @theme block. The @dev-dga token bridge defines the same names, so whichever file loads last recolors the other.

• Delete the kit’s @theme block and its :root and .dark color variables.
• Remove the kit’s animation plugin and its dark-mode class variant; DgaProvider mode controls dark mode.
• Replace the kit’s components screen by screen, then delete its component folder.

After the swap, look for pagination, KPI cards, empty states, and steppers that your app built before the move. The swap replaces the kit’s primitives, while the parts your app composed from them stay behind. Each has a replacement:

• Pagination from a Laravel paginator (Storybook recipe)
• Metric as a link with asChild (Storybook recipe)
• EmptyState inside a table (Storybook recipe)
• ProgressIndicator, for wizard steps; a phase summary bar stays app code

#Before you ship

• The stylesheet declares the layers before importing @dev-dga/css.
• DgaProvider wraps the root, and dark mode switches through its mode prop.
• Each form submits the payload your server expects: see the Forms guide.
• Every page is checked in LTR and RTL, light and dark.