To measure anything is art, there are already established UX pillars ittertating from previous giants providing 90 years of programing protoypes. From paper - framework provides with you with all past graciously failure summarizing and iterated upon bringing us to now. The state of design

Using a React design framework, we download the packages from Github, giving us an emotional assistant asking poignant questions to determining mental state of the users, with guided audio classes to work through to achive goals set during the onboarding process.

Lets begin:
On the front-end, our priority was to deliver a clean, consistent UI quickly – without reinventing the wheel on design. To achieve this, we chose Shadcn via the Shadcn library for React. Shadcn is a set of beautifully-designed, accessible components and a code distribution platform. It works with your favorite frameworks. Open Source. Open Code.

Step 1

Create a themed tailwind design system styling the page using less than 140 characters

Create the folder structure and deploy your hosting provider like vercel/firestore/aws.

Open Terminal and grab the packages
pnpm create-payload-app
📹 Video comming

Using a package manager to provide the following:

Typography

Use the payloadcms typography

H1

H3

Important

Primary

Secondary

1<h1>H1</h1>
2<h3>H3</h3>
3<p class="doc-controls__value">
4Important</p>
5<p>
6Primary</p>
7<p class="doc-controls__label">
8Secondary</p>

Button

Use the classes payload uses to style its buttons

Basic Button

WISIWIG gets you far, until you want to scale creating your own collection of data.

Access contol may influcance who the button is enabled for ,a nd what field type collection is being updated

- primary btn--style--primary

- secondary btn--style--secondary

1<button class="btn btn--style-primary">
2  Save
3</button>

Input

Instantly adhere to a proven design system. The look and feel remains consistent across the app, and users get familiar, intuitive interactions

1<div class="field-type text">
2  <label htmlFor="field-label" for='field-name'>name</label>
3  <div class="input-wrapper">
4    <input id="field-name" type="text" name="name" />
5  </div>
6</div>

Card / panel

Component to behave differently, there’s ample documentation and community examples to draw on.

1<div class="auth-fields account__auth">
2hello
3</div>

Extending Tailwinds colour

Configuration snippet to use PayloadCMS colors in Payload

1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      colors: {
6        'base': {
7          0: 'var(--theme-base-0)',
8          50: 'var(--theme-base-50)',
9          100: 'var(--theme-base-100)',
10          150: 'var(--theme-base-150)',
11          200: 'var(--theme-base-200)',
12          250: 'var(--theme-base-250)',
13          300: 'var(--theme-base-300)',
14          350: 'var(--theme-base-350)',
15          400: 'var(--theme-base-400)',
16          450: 'var(--theme-base-450)',
17          500: 'var(--theme-base-500)',
18          550: 'var(--theme-base-550)',
19          600: 'var(--theme-base-600)',
20          650: 'var(--theme-base-650)',
21          700: 'var(--theme-base-700)',
22          750: 'var(--theme-base-750)',
23          800: 'var(--theme-base-800)',
24          850: 'var(--theme-base-850)',
25          900: 'var(--theme-base-900)',
26          950: 'var(--theme-base-950)',
27        },
28        'success': {
29          0: 'var(--theme-success-0)',
30          50: 'var(--theme-success-50)',
31          100: 'var(--theme-success-100)',
32          150: 'var(--theme-success-150)',
33          200: 'var(--theme-success-200)',
34          250: 'var(--theme-success-250)',
35          300: 'var(--theme-success-300)',
36          350: 'var(--theme-success-350)',
37          400: 'var(--theme-success-400)',
38          450: 'var(--theme-success-450)',
39          500: 'var(--theme-success-500)',
40          550: 'var(--theme-success-550)',
41          600: 'var(--theme-success-600)',
42          650: 'var(--theme-success-650)',
43          700: 'var(--theme-success-700)',
44          750: 'var(--theme-success-750)',
45          800: 'var(--theme-success-800)',
46          850: 'var(--theme-success-850)',
47          900: 'var(--theme-success-900)',
48          950: 'var(--theme-success-950)',
49        },
50        'warning': {
51          0: 'var(--theme-warning-0)',
52          50: 'var(--theme-warning-50)',
53          100: 'var(--theme-warning-100)',
54          150: 'var(--theme-warning-150)',
55          200: 'var(--theme-warning-200)',
56          250: 'var(--theme-warning-250)',
57          300: 'var(--theme-warning-300)',
58          350: 'var(--theme-warning-350)',
59          400: 'var(--theme-warning-400)',
60          450: 'var(--theme-warning-450)',
61          500: 'var(--theme-warning-500)',
62          550: 'var(--theme-warning-550)',
63          600: 'var(--theme-warning-600)',
64          650: 'var(--theme-warning-650)',
65          700: 'var(--theme-warning-700)',
66          750: 'var(--theme-warning-750)',
67          800: 'var(--theme-warning-800)',
68          850: 'var(--theme-warning-850)',
69          900: 'var(--theme-warning-900)',
70          950: 'var(--theme-warning-950)',
71        },
72        'error': {
73          0: 'var(--theme-error-0)',
74          50: 'var(--theme-error-50)',
75          100: 'var(--theme-error-100)',
76          150: 'var(--theme-error-150)',
77          200: 'var(--theme-error-200)',
78          250: 'var(--theme-error-250)',
79          300: 'var(--theme-error-300)',
80          350: 'var(--theme-error-350)',
81          400: 'var(--theme-error-400)',
82          450: 'var(--theme-error-450)',
83          500: 'var(--theme-error-500)',
84          550: 'var(--theme-error-550)',
85          600: 'var(--theme-error-600)',
86          650: 'var(--theme-error-650)',
87          700: 'var(--theme-error-700)',
88          750: 'var(--theme-error-750)',
89          800: 'var(--theme-error-800)',
90          850: 'var(--theme-error-850)',
91          900: 'var(--theme-error-900)',
92          950: 'var(--theme-error-950)',
93        },
94        'accent': {
95          0: 'var(--theme-accent-0)',
96          50: 'var(--theme-accent-50)',
97          100: 'var(--theme-accent-100)',
98          150: 'var(--theme-accent-150)',
99          200: 'var(--theme-accent-200)',
100          250: 'var(--theme-accent-250)',
101          300: 'var(--theme-accent-300)',
102          350: 'var(--theme-accent-350)',
103          400: 'var(--theme-accent-400)',
104          450: 'var(--theme-accent-450)',
105          500: 'var(--theme-accent-500)',
106          550: 'var(--theme-accent-550)',
107          600: 'var(--theme-accent-600)',
108          650: 'var(--theme-accent-650)',
109          700: 'var(--theme-accent-700)',
110          750: 'var(--theme-accent-750)',
111          800: 'var(--theme-accent-800)',
112          850: 'var(--theme-accent-850)',
113          900: 'var(--theme-accent-900)',
114          950: 'var(--theme-accent-950)',
115        },
116      },
117    },
118  },
119  variants: {},
120  plugins: [],
121};

Replace the .svg to change the brand logo

1import clsx from 'clsx'
2import React from 'react'
3
4interface Props {
5  className?: string
6  loading?: 'lazy' | 'eager'
7  priority?: 'auto' | 'high' | 'low'
8}
9
10export const Logo = (props: Props) => {
11  const { loading: loadingFromProps, priority: priorityFromProps, className } = props
12
13  const loading = loadingFromProps || 'lazy'
14  const priority = priorityFromProps || 'low'
15
16  return (
17    /* eslint-disable @next/next/no-img-element */
18    <img
19      alt="Payload Logo"
20      width={193}
21      height={34}
22      loading={loading}
23      fetchPriority={priority}
24      decoding="async"
25      className={clsx('max-w-[9.375rem] w-full h-[34px]', className)}
26      src="/simplePlekbold.svg"
27    />
28  )
29}

Add a free image bucket to config

Update payload config to include the S3 Storage inc plugin s3Storage

1 import { s3Storage } from '@payloadcms/storage-s3'
2 
3  collections: [Booking, Pages, Posts, Media, Categories, Users],
4  cors: [getServerSideURL()].filter(Boolean),
5  globals: [Header, Footer],
6  plugins: [
7    ...plugins,
8    s3Storage({
9      bucket: process.env.R2_BUCKET,
10      collections: {
11        media: true,
12      },

Add the bucket credencials to your .env

Add bucket credenitials to the .env on the root
R2_BUCKET=
R2_REGION=auto
R2_ACCESS_KEY_ID=
R2_SECRET_ACCESS_KEY=
R2_ENDPOINT=

Sources

https://snippets.10xmedia.de/

The AI coach supporting you to be the person you want to be