Rest UI

A versatile skeuomorphic and minimalist design system library for Tailwind and NextJS.

Installation

1. Starts a new Next+Tailwind project using bunx create-next-app@latest or ensure you've the following dependencies installed react react-dom", typescript, tailwindcss, postcss, autoprefixer

2. Apply RestUI to your next.config.mjs file.

// @ts-check
import { withRestUI } from "restui/lib/next.mjs";

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withRestUI(nextConfig);

3. Apply RestUI to your tailwind.config.ts file. The number parameter passed to initRestUI() is the hue of your brand's primary color.

import type { Config } from "tailwindcss";
import { initRestUI } from "restui/lib/tailwind";

const config: Config = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  plugins: [initRestUI(197)],
};
export default config;

4. Apply RestUI to your .eslintrc.cjs file.

import { restUIRecommended } from "restui/lib/eslint.cjs";
module.exports = restUIRecommended;

Known issues

Broken dynamic Tailwind text- classes

This is caused by this issue of the tailwindcss-leading-trim which implements a polyfill for the upcoming CSS leading-trim property.

With this issue, text-[3rem] will for example be rendered as:

.\!text-\[3rem\] {
    color: 3rem !important;
}

TOADD

• Optimized to run on Cloudflare Pages
• Don't forget to enable the zone of your domain in Cloudflare Images, else images will be broken after deployment
• component in layout.tsx
• Customization of the heightRatio, fontSizeRatio, radiusRatio, paddingRatio, etc.