Remix

Create project

Start by creating a new Remix project using create-remix:

loading...

Run the CLI

Run the shadcn init command to setup your project:

loading...

You will be asked a few questions to configure components.json.

Which color would you like to use as base color? › Neutral

Ignore them if you want to use Pure UI Design System.

App structure

• Place the UI components in the app/components/ui folder.
• Your own components can be placed in the app/components folder.
• The app/lib folder contains all the utility functions. We have a utils.ts where we define the cn helper.
• The app/tailwind.css file contains the global CSS.

Install Tailwind CSS

loading...

Then we create a postcss.config.js file:

postcss.config.jsexport default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

And finally we add the following to our remix.config.js file:

remix.config.js/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ...
  tailwind: true,
  postcss: true,
  ...
};

Add tailwind.css to your app

In your app/root.tsx file, import the tailwind.css file:

app/root.tsximport styles from "./tailwind.css?url"

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]

Enter license

Enter your license key to unlock the full features of Pure UI:

Initialize design system

Use Design System to learn and initialize your own design system or start with the default theme:

loading...

Add components

You can now start adding components to your project.

loading...

The command above will add the Button component to your project. You can then import it like this:

app/routes/index.tsximport { Button } from "~/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}