Make it yours.

Before you start

The public package is being prepared. After the npm release, select a published version and install it in your React application:

npm install --save-exact @revido-llc/kit@<version>

The Kit uses React 19, Tailwind CSS v4, lucide-react and motion. Next.js is optional and is needed for the Next.js adapter. The editor is a separate optional entry point.

1. Add styles

Import Tailwind and the Kit styles once in your global stylesheet:

@import "tailwindcss";
@import "@revido-llc/kit/css";

The Kit stylesheet includes its tokens, theme and source scanning. For dark mode, put the dark class on the document's html element.

2. Load the font

For Next.js, load the Kit's self-hosted Inter font in the root layout:

import { revidoFont } from "@revido-llc/kit/next/font";

<html className={revidoFont.variable}>
  {/* Your application */}
</html>

For other React setups, import the font stylesheet in your global CSS instead:

@import "@revido-llc/kit/css/fonts.css";

3. Wrap your app

The provider connects Kit navigation to your router and sets up motion. For Next.js App Router, wrap your application with the adapter:

import { NextKitProvider } from "@revido-llc/kit/next";

<NextKitProvider>{children}</NextKitProvider>

For other React apps, use KitProvider. Pass its navigate callback to use your router for links and buttons with an href.

import { KitProvider } from "@revido-llc/kit";

<KitProvider navigate={(href) => router.push(href)}>
  {children}
</KitProvider>

4. Use a component

import { Button } from "@revido-llc/kit";

<Button onPress={() => saveChanges()}>Save changes</Button>

Use labels for form fields and accessible names for icon-only controls. Each component reference includes its documented keyboard behavior and usage guidance where available.

Compose a page

The page composer uses Kit components and synthetic sample data. The preview is a front-end starting point; connecting it to a production backend is separate work.