syncfusion-react-themes — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited syncfusion-react-themes (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Syncfusion React components provide comprehensive theming support with modern, customizable themes. This skill guides you through applying themes, customizing appearance, implementing dark mode, using CSS variables, managing icons, and creating custom themes for consistent, professional React applications.
📄 Read: references/built-in-themes.md
📄 Read: references/dark-mode.md
e-dark-mode class📄 Read: references/css-variables.md
📄 Read: references/icons.md
e-icons class📄 Read: references/advanced-theming.md
📄 Read: references/advanced-theming.md
Step 1: Install Syncfusion React Package
npm install @syncfusion/ej2-react-buttons --saveStep 2: Import Theme CSS
Option 1: Import from npm (Recommended)
/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";Option 2: Use CDN
⚠️ Important: The CDN version MUST match your installed npm package version to avoid style and rendering issues.
To find your installed version:
npm list @syncfusion/ej2-react-buttonsThen use the matching CDN version:
<!-- index.html -->
<!-- Replace {VERSION} with your installed package version (e.g., 28.1.33, 33.1.44) -->
<link href="https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3.css" rel="stylesheet"/>
<!-- Example: If your package version is 33.1.44 -->
<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet"/>Note: Using npm imports (Option 1) is recommended as it automatically keeps CSS and JavaScript versions in sync.
import React, { useState } from 'react';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
const [isDarkMode, setIsDarkMode] = useState(false);
const handleDarkModeToggle = (event) => {
const checked = event.checked ?? false;
setIsDarkMode(checked);
if (checked) {
document.body.classList.add('e-dark-mode');
} else {
document.body.classList.remove('e-dark-mode');
}
};
return (
<div>
<CheckBoxComponent
label="Enable Dark Mode"
checked={isDarkMode}
change={handleDarkModeToggle}
/>
<ButtonComponent cssClass="e-primary">Sample Button</ButtonComponent>
</div>
);
}
export default App;For Fluent 2 Theme:
/* src/App.css */
:root {
--color-sf-primary: #ff6b35; /* Custom orange */
}For Material 3 Theme (uses RGB values):
/* src/App.css */
:root {
--color-sf-primary: 255, 107, 53; /* RGB: Custom orange */
}<!-- index.html -->
<body class="e-bigger">
<div id="root"></div>
</body>Or per-component:
<ButtonComponent cssClass="e-bigger">Touch-Friendly Button</ButtonComponent>/* src/App.css - Lite version without bigger mode styles */
@import "@syncfusion/ej2/tailwind3-lite.css";Install icons package:
npm install @syncfusion/ej2-iconsImport icon styles:
/* src/App.css */
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";Use icons in components:
<span className="e-icons e-cut"></span>
<span className="e-icons e-medium e-copy"></span>
<span className="e-icons e-large e-paste"></span>~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.