jacob-ebey / remix-shadcn Goto Github PK

View Code? Open in Web Editor NEW

115.0 6.0 4.0 237 KB

Remix + Vite + shadcn/ui starter template.

Home Page: https://remix-shadcn.pages.dev/

JavaScript 21.43% TypeScript 67.17% CSS 7.67% Dockerfile 3.73%

remix remix-run remix-stack remix-stacks remix-template

remix-shadcn's Introduction

Welcome to Remix + Vite + shadcn/ui!

📖 See the Remix docs and the Remix Vite docs for details on supported features.

Getting Started

Node Server:

npx create-remix@latest --template jacob-ebey/remix-shadcn

Cloudflare Pages:

npx create-remix@latest --template https://github.com/jacob-ebey/remix-shadcn/tree/cloudflare

Or for a more flushed out template with a login flow and a SQLite database backed by Drizzle ORM:

Node Server:

npx create-remix@latest --template https://github.com/jacob-ebey/remix-shadcn/tree/drizzle

Cloudflare Pages:

npx create-remix@latest --template https://github.com/jacob-ebey/remix-shadcn/tree/drizzle-cloudflare

Built in theme switcher

Development

Run the Vite dev server:

npm run dev

Deployment

First, build your app for production:

npm run build

Setup your environment:

NODE_ENV='production'

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of npm run build and the server

server.js
build/server
build/client

Take a look at the provided Dockerfile for further details on how to configure a production environment.

remix-shadcn's People

Contributors

Stargazers

Watchers

Forkers

duncanchen reedycat doctorbilardo

remix-shadcn's Issues

Opacity modifier issue

When i tried to use the opacity modifier with extended colors e.g. bg-primary/50, i noticed that it doesn't work. Maybe it's because Tailwind didn't know where to inject the value, so i added the special placeholder manually into lightDarkVar function like this:

function lightDarkVar(baseName) {
  return `var(--theme-light, hsl(var(--${baseName}) / <alpha-value>)) var(--theme-dark, hsl(var(--${baseName}-dark) / <alpha-value>))`;
}

But now there's another issue, if i understand it correctly, looks like tailwindcss didn't do global replace here, so only the first occurance got replaced, in this case only the light mode that have the proper opacity value.

I currently solved this by patching tailwindcss, but this doesn't feel right. Is there a better way to work with this?

Form component

I recently went through this and I'm wondering whether you plan to include the Form component adjusted to work using the Remix Form component as a base?

The shadcn Form component is great from a UI/UX perspective, but doesn't work the way you'd expect a form to work in Remix.

I've found https://www.remix-validated-form.io/ to be the best library so far for easily handling form validation with Zod on both client-side and server-side using a single schema.

Flash of unstyled content

I've encountered an issue with the template where there's a flash of unstyled content (FOUC) during the initial page load. I had the same issue with a new remix+vite project using tailwind.

Steps to Reproduce:

Clone the repository and install dependencies.
Deploy the app using the provided build command.
Access the application in a web browser for the first time or hard refresh the page.

Console

Tailwind dark: prefix not working with dark mode theme switching

I am using this template (which is great by the way!) and I love that it has a theme switcher to support dark mode. However, the dark: Tailwind CSS prefix does not seem to work. Looking in the Tailwind docs, I noticed they say if you are going to change the theme manually you need to use the selector value instead of the [class] value for darkMode in tailwind.config.cjs. I changed it to look like:

module.exports = {
	darkMode: "selector",
	...

but it had no effect. I then noticed in the docs that the to use the selector mode, you have to specify dark in tag like this:

<!-- Dark mode enabled -->
<html class="dark">

So I changed the ThemeSwitcherSafeHTML component like so:

export function ThemeSwitcherSafeHTML({
	children,
	lang,
	...props
}: React.HTMLProps<HTMLHtmlElement> & { lang: string }) {
	const dataTheme =
		typeof document === "undefined"
			? undefined
			: document.documentElement.getAttribute("data-theme") || undefined;

	return (
		<html {...props} lang={lang} data-theme={dataTheme} className={(dataTheme === "dark") ? "dark" : ""} >
			{children}
		</html>
	);
}

This works in either dark mode or light mode (which one seems to be based on whatever the theme was previously), but not both.

Any suggestions would be most welcome - and thanks again for this starter template!