Install and configure Preskok UI for Remix.
Note: This guide is for Remix. For React Router, see the React Router guide.
Start by creating a new Remix project using create-remix:
npx create-remix@latest my-appRun the shadcn CLI to set up Preskok UI and install your first component:
npx shadcn@latest init @preskok/default @preskok/buttonNote: This app structure is only a suggestion. You can place the files wherever you want.
app/components/ui folder.app/components folder.app/lib folder contains all the utility functions. We have a utils.ts where we define the cn helper.app/tailwind.css file contains the global CSS.npm install -D tailwindcss@latest autoprefixer@latestThen we create a postcss.config.js file:
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}And finally we add the following to our remix.config.js file:
/** @type {import('@remix-run/dev').AppConfig} */
export default {
...
tailwind: true,
postcss: true,
...
};tailwind.css to your appIn your app/root.tsx file, import the tailwind.css file:
import styles from "./tailwind.css?url"
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: styles },
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]The command above will add the Button component to your project. You can then import it like this:
import { Button } from "~/components/ui/preskok-ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}