primereact-ux-wireframe

Grayscale wireframe/lo-fi CSS theme for PrimeReact v10. Ideal for rapid prototyping and Figma Make.

• Zinc/gray palette — desaturated primary color
• Flat design — all shadows removed
• Colored semantic states — success, info, warning, error stay clearly color-coded
• Minimal border-radius (3px)
• System font stack

Requirements

• PrimeReact 10.x (not compatible with v11+)

Installation

npm install primereact-ux-wireframe

Usage

Import the CSS once in your app entry point:

import 'primereact-ux-wireframe/theme.css';

Then use PrimeReact components as normal — no theme provider needed:

import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import 'primereact-ux-wireframe/theme.css';
import 'primereact/resources/primereact.min.css';

function App() {
  return (
    <div>
      <InputText placeholder="Enter text..." />
      <Button label="Submit" />
    </div>
  );
}

Figma Make

Add to your project dependencies:

{
  "primereact": "^10.0.0",
  "primereact-ux-wireframe": "^1.0.0"
}

Add this import at your app entry point:

import 'primereact-ux-wireframe/theme.css';
import 'primereact/resources/primereact.min.css';

In your Figma Make system prompt / guidelines, include:

"Use PrimeReact v10 components. Import primereact-ux-wireframe/theme.css as the theme. Do not configure any theme provider — just import the CSS file."

Compatibility

| Package | Version | |---------|---------| | primereact | >=10.0.0 <11.0.0 |

This theme is built from the official primereact-sass-theme 10.8.5 base and compiled to a static CSS file.

License

MIT © czechdaver