Skip to content

vite-tailwind-quickstart

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

vite-tailwind-quickstart

README.md

PrimeUI Pro TaskBoard React Vite Tailwind Quickstart

A minimal React and Vite application for starting with PrimeUI Pro TaskBoard for React using copied Tailwind UI parts and native HTML controls. It does not install PrimeReact or load the PrimeOne theme.

Run the App

From this directory:

corepack pnpm install
cp .env.example .env
corepack pnpm dev

Set your PrimeUI Pro license key in .env:

VITE_PRIMEUI_LICENSE=your-license-key

Open the local URL printed by Vite.

What the Example Shows

  • Explicit TaskBoard, Tailwind, style, and license setup
  • A controlled TaskBoard with reorderable columns and tasks
  • Add, edit, and delete actions through TaskBoard's exposed methods
  • A native HTML dialog and form controls styled with Tailwind utilities
  • Editable Tailwind card and column-header UI parts
  • Application-defined TaskBoard tokens with light and dark modes

Project Map

src/
├── main.tsx                        Keep: TaskBoard styles and license setup
├── assets/css/main.css            Tailwind import, fixed theme tokens, and TaskBoard variables
├── components/primeui/taskboard/  Keep: editable Tailwind TaskBoard UI parts
├── components/shell/              Optional: quickstart topbar and footer
├── hooks/useAppTheme.ts           Optional: light and dark mode state
├── demo/taskboard/                Replace: board, native editor, and fixture data
└── App.tsx                         Replace: one-page quickstart composition

No PrimeReact Dependency

The application uses native button, input, select, textarea, and dialog elements. package.json does not include primevue, @primevue/nuxt-module, or @primeuix/themes.

Only @primeui/taskboard-style/style.css is loaded from the TaskBoard style package. The PrimeOne stylesheet is not used; fixed color, surface, focus, radius, and TaskBoard variables are defined in src/assets/css/main.css.

Adapt the Quickstart

The task model, columns, and fixture tasks are in src/demo/taskboard/data.ts. Replace those values with data from your store or API. Persistence stays in your application; update your store or backend when accepting board changes.

To replace the example, update src/App.tsx, then delete src/demo/taskboard when it is no longer imported. Keep src/components/primeui/taskboard for the Tailwind card and header surfaces, or replace them with your own TaskBoard slot content.

Tailwind UI Parts

The TaskBoard UI parts in src/components/primeui/taskboard are copied into and owned by this application. Regenerate the complete Tailwind set with:

corepack pnpm dlx @primeui/cli add taskboard --framework react --ui tailwind --output-dir ./src/components/primeui

This quickstart keeps only the advanced card and standard column header used by its page.

Commands

corepack pnpm dev
corepack pnpm build
corepack pnpm preview

Documentation