InstallationCopy Anchor Link

Install both packages into your React or Next.js application:

npm install @filekit-studio/sketch @filekit-studio/diagram

Required CSS ImportCopy Anchor Link

To ensure all toolbar buttons, modals, dropdowns, and canvas icons render correctly, import @filekit-studio/sketch/styles.css (or one of the theme variants) into your root layout (app/layout.tsx or pages/_app.tsx):

import React from "react";
// Default theme
import "@filekit-studio/sketch/styles.css";

// Or choose a dedicated theme variant:
// import "@filekit-studio/sketch/classic.css";
// import "@filekit-studio/sketch/neumorphic.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Zero CSS Pollution (Strict Scope Isolation):
All package styles, Tailwind utilities, and resets are strictly scoped within .fk-sketch-root. Importing @filekit-studio/sketch/styles.css will never override or clash with your application's fonts, markdown code blocks, buttons, or global CSS.

Peer DependenciesCopy Anchor Link

Both packages require React 18 or 19:

• react >= 18.0.0
• react-dom >= 18.0.0

Next, check out Next.js & SSR to learn how to dynamically import the canvas safely.