customization

Everything you need to know about customization in getting started. Copy, paste, and customize.

Utility-First Customization

The fastest way to customize is by using Tailwind's utility classes. Since the code is yours, you can change margins, paddings, and colors directly in the markup.

Original

<div className="p-4 bg-white border border-border">

Customized

<div className="p-8 bg-slate-50 border-2 border-primary shadow-xl">

Logic & State Extension

Unlike rigid library components, SnapJSX components are standard React functions. You can easily add state, refs, or custom event handlers.

Example.tsx

export function CustomModal() {
  const [isOpen, setIsOpen] = useState(false);
  const modalRef = useRef(null);
  
  // Add your own custom logic here
  useEffect(() => {
    // Intersection observers, event listeners, etc.
  }, []);

  return (
    // Your copy-pasted JSX here
  );
}

Design System Integration

Integrate your own design system by replacing our default variables with your own or using your Tailwind config's theme extension.

Consistent spacing using your Tailwind 'spacing' scale
Color synchronization with your brand palette
Typography alignment with your chosen font families

Global Theming

Our components respect your system-wide theme settings through CSS variables. Edit your main CSS file to change the feel of all components at once.

globals.css

Tailwind variables

CSS custom properties

:root {
  --primary: 220 100% 50%;
  --radius: 1rem;
  --font-sans: 'Inter', sans-serif;
}

.dark {
  --primary: 220 100% 70%;
}