1. Create a new Remix project:
npx create-remix@latest
cd my-app
2. Install Superkey:
npm install superkey @headlessui/react
3. Add in remix.config.js:
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
serverBuildTarget: "vercel",
server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
ignoredRouteFiles: ["**/.*"],
serverDependenciesToBundle: ["superkey"],
// your other config...
};
4. Add Superkey styles in entry.client.tsx:
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import "superkey/styles.css";
function hydrate() {
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>
);
});
}
if (window.requestIdleCallback) {
window.requestIdleCallback(hydrate);
} else {
window.setTimeout(hydrate, 1);
}
5. Add Superkey styles in root.tsx:
import type { MetaFunction, LinksFunction } from "@remix-run/node";
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import styles from "superkey/styles.css";
export const links: LinksFunction = () => {
return [{ rel: "stylesheet", href: styles }];
};
export const meta: MetaFunction = () => ({
charset: "utf-8",
title: "New Remix App",
viewport: "width=device-width,initial-scale=1",
});
export default function App() {
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
6. Create component:
import { useState } from "react";
import { Command, CommandInput, CommandList, CommandOption } from "superkey";
function App() {
const [open, setOpen] = useState(false);
return (
<Command
open={open}
onClose={() => {
setOpen(false);
}}
>
<CommandInput
onChange={(e) => {
console.log(e.target.value);
}}
/>
<CommandList>
<CommandOption value="Option 1">
<h1>With Remix āØ</h1>
<p>Description</p>
</CommandOption>
</CommandList>
</Command>
);
}
7. Run your project:
npm run dev
š„³ Ready.