pleate.ui
Components283Palettes11React19Tailwindv4ContrastWCAG AABackendDjango + MongoDBPrimitivesRadixMotionreduced-motion safe

pleate 0.3 · React UI for Next.js

pleate.ui

Components, tokens and themes for Next.js, and a Django backend that speaks to the same UI. All in one place, clear and accessible.

Browse components Example landing page

283 components11 palettes

plate.app/trips/lisbon

Weekend in Lisbon

14 to 17 Nov

+1
  • Fri 14Tram 28 and Alfama walk10:00
  • Sat 15Time Out Market lunch13:30
  • Sun 16Sintra day trip08:45

Total for 4

€876
Seats held 20 min
  1. 01

    Palettes at runtime

    Eleven presets, or a full AA-checked palette generated from one color in OKLCH.

  2. 02

    Motion with a reason

    One easing curve and short durations. Everything stops for reduced motion.

  3. 03

    Accessible by default

    Radix primitives, keyboard support, visible focus and AA contrast.

  4. 04

    iOS at heart

    Grouped surfaces, capsule buttons, Dynamic Type sizes, solid colors and no blur.

Effects

All components

Install

npm install pleate
/* app/globals.css */
@import "tailwindcss";
@import "pleate/styles.css";
@source "../node_modules/pleate/dist";
// app/layout.tsx
import { ThemeProvider, ThemeScript } from "pleate/theme";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head><ThemeScript /></head>
      <body><ThemeProvider>{children}</ThemeProvider></body>
    </html>
  );
}