Andrey's starter project.
Includes a parallax banner, navbar, mobile menu and an animated heads/tails coin flip with a reset button.
See live: https://starter-ts-next-uno-shad.vercel.app
Alternatively, see my Vite + UnoCSS + shadcn/ui starter.
git clone https://github.com/andreysamode/starter-ts-next-uno-shad .
npm i
npm run dev
Let's say we want to make a couple of simple buttons that fill with a color from left to right on hover.
Tailwind:
<div className='[&_button]:bg-gradient-to-r [&_button]:bg-[length:210%] [&_button]:bg-right
[&_button]:from-amber-600 [&_button]:from-50% [&_button]:to-white [&_button]:to-50%
[&_button]:transition-300 [&_button]:transition-all [&_button]:border-2
[&_button]:border-solid [&_button]:border-amber-600 [&_button]:text-amber-600
[&_button]:px-5 [&_button]:py-2 [&_button]:mx-2 [&_button:hover]:bg-left
[&_button:hover]:text-white'>
<button>BUTTON 1</button>
<button>BUTTON 2</button>
</div>
Tailwind, if repeating the code for each button:
<div>
<button className='bg-gradient-to-r bg-[length:210%] bg-right from-amber-600 from-50%
to-white to-50% transition-300 transition-all border-2 border-solid border-amber-600
text-amber-600 px-5 py-2 mx-2 hover:bg-left hover:text-white'>BUTTON 1</button>
<button className='bg-gradient-to-r bg-[length:210%] bg-right from-amber-600 from-50%
to-white to-50% transition-300 transition-all border-2 border-solid border-amber-600
text-amber-600 px-5 py-2 mx-2 hover:bg-left hover:text-white'>BUTTON 2</button>
</div>
UnoCSS:
<div className='[&_button]:(bg-(gradient-to-r [length:210%] right) from-(amber-600 50%)
to-(white 50%) transition-(300 all) b-(2 solid amber-600) text-amber-600 px-5 py-2
hover:(bg-left text-white))'>
<button>BUTTON 1</button>
<button>BUTTON 2</button>
</div>
This also works with responsive screen sizes (use lt-sm
for phone size).
UnoCSS animations: https://animate.zyob.top
Components: https://ui.shadcn.com/docs/components/button
To add a new component:
npx shadcn-ui@latest add button
UnoCSS doesn't work with Next.js out of the box. To overcome this, we use unocss-cli, which generates src/app/uno-cli.css
and watches for file changes on dev.
package.json:
...
"scripts": {
"dev": "concurrently 'next dev' 'npm run dev:css'",
"build": "./build.sh",
"start": "next start",
"lint": "next lint",
"dev:css": "unocss -c uno.config.ts -o src/app/uno-cli.css -w 'src/**/*.tsx'",
"build:css": "unocss -c uno.config.ts -o src/app/uno-cli.css 'src/**/*.tsx'"
},
...
While unocss-cli works on dev, Next.js ignores the variant groups transformer on build. To overcome this, we make a copy of src
and run unocss-cli with the --write-transformed
parameter, which breaks out the variant groups before build. We then copy back our original src
with variant groups intact.
build.sh:
#!/bin/bash
if [ -d 'src-orig' ]; then
echo 'ERROR: Last build did not clean up successfully. Please replace "src" with "src-orig"'
else
cp -r src src-orig
unocss -c uno.config.ts -o src/app/uno-cli.css 'src/**/*.tsx' --write-transformed
next build
rm -rf src
mv src-orig src
echo 'DONE!'
echo 'IMPORTANT: Flip away and back from the currently opened tab if it has variant groups.'
fi
Next.js also doesn't honor CSS import order. This results in unexpected style overrides with UnoCSS and shadcn/ui. To preserve the order of imports, we import styles through src/app/globals.css:
@import '@unocss/reset/tailwind.css';
@import '@/app/uno-cli.css';
...