Files
payload/examples/tailwind-shadcn-ui
Jacob Fletcher 1f4790a314 chore(examples): removes all instances of React.forwardRef (#10334)
Similar to #10331. Since React 19, refs can now be passed directly
through props without the need for `React.forwardRef`. This greatly
simplifies components types and overall syntax.
2025-01-03 18:10:46 +00:00
..

Payload with TailwindCSS and shadcn/ui

This is an example repo of Payload being setup with TailwindCSS and shadcn/ui components ready to be used in the admin panel itself.

Checkout our tutorial on our website

Quick Start

To spin up this example locally, follow these steps:

  1. Run the following command to create a project from the example:
  • npx create-payload-app --example tailwind-shadcn-ui
  1. cp .env.example .env to copy the example environment variables

    Adjust PAYLOAD_PUBLIC_SITE_URL in the .env if your front-end is running on a separate domain or port.

  2. pnpm dev, yarn dev or npm run dev to start the server

    • Press y when prompted to seed the database
  3. open http://localhost:3000 to access the home page

  4. open http://localhost:3000/admin to access the admin panel

That's it! Changes made in ./src will be reflected in your app. See the Development section for more details.