@nine-slice-frame/react

@nine-slice-frame/react

Nine-slice scaling component for React using CSS border-image.

🎯 Live Demo & Tester Tool

What is Nine-Slice Scaling?

Nine-slice scaling divides an image into 9 sections, allowing it to scale to any size while preserving corner details and preventing distortion. Perfect for UI frames, borders, panels, and buttons that need to scale dynamically.

┌─────────┬───────────┬─────────┐
│ Corner  │ Top Edge  │ Corner  │
│ (Fixed) │ (Scale H) │ (Fixed) │
├─────────┼───────────┼─────────┤
│  Left   │  Center   │  Right  │
│  Edge   │ (Scale    │  Edge   │
│(Scale V)│  Both)    │(Scale V)│
├─────────┼───────────┼─────────┤
│ Corner  │ Bottom    │ Corner  │
│ (Fixed) │   Edge    │ (Fixed) │
└─────────┴───────────┴─────────┘

Why Nine-Slice Scaling?

The Problem: Traditional image scaling stretches the entire image uniformly, distorting corners, borders, and decorative elements. This makes UI elements look unprofessional and breaks visual consistency.

The Solution: Nine-slice scaling keeps corners and edges crisp while only stretching the middle sections. This means:

• Single image, infinite sizes - One asset works for buttons, dialogs, and panels of any dimension
• Pixel-perfect corners - Ornate borders and rounded corners stay sharp at any scale
• Smaller file sizes - No need for multiple image variants for different sizes
• Ideal for pixel art - Preserves the crisp aesthetic of retro-style UIs
• CSS-native performance - Uses browser-native border-image, no canvas or WebGL overhead

Common Use Cases:

• Game UI frames and dialog boxes
• Decorative borders and panels
• Scalable buttons with ornate edges
• Retro/pixel art interfaces
• Dynamic content containers

Why This Library?

Zero Dependencies - No runtime dependencies beyond React. This package only requires React as a peer dependency.

Incredibly Small - Minimal bundle impact: ~881B (ESM)

Native Performance - Uses browser-native CSS border-image property, not canvas rendering or heavy image manipulation libraries. Fast, efficient, and hardware-accelerated.

Framework-Agnostic API - Same simple, consistent API across all frameworks:

• @nine-slice-frame/react (you are here)
• @nine-slice-frame/vue
• @nine-slice-frame/svelte
• @nine-slice-frame/solid

Installation

npm install @nine-slice-frame/react
# or
pnpm add @nine-slice-frame/react
# or
yarn add @nine-slice-frame/react

Usage

import { NineSliceFrame } from '@nine-slice-frame/react';

function App() {
  return (
    <NineSliceFrame
      imagePath="/ui/frame.png"
      slice={7}
      borderWidth={5}
      repeat="stretch"
      fill={true}
      pixelated={true}
    >
      <p>Your content here</p>
    </NineSliceFrame>
  );
}

Props

Prop	Type	Default	Description
imagePath	string	required	Path to the image (relative to public folder)
slice	number | object	8	Slice values - number for uniform, or { top, right, bottom, left } for per-edge
borderWidth	number	5	Visual border width in pixels
repeat	'stretch' | 'repeat' | 'round' | 'space'	'stretch'	Border repeat mode
fill	boolean	true	Use 'fill' to show center of image as background
pixelated	boolean	true	Use pixelated rendering for pixel art
className	string	''	Additional CSS class names
style	React.CSSProperties	{}	Additional inline styles

Advanced Usage

Different Slice Values Per Edge

<NineSliceFrame
  imagePath="/ui/fancy-frame.png"
  slice={{ top: 10, right: 8, bottom: 10, left: 8 }}
  borderWidth={6}
>
  Content with asymmetric border
</NineSliceFrame>

Custom Styling

<NineSliceFrame
  imagePath="/ui/frame.png"
  slice={8}
  borderWidth={10}
  className="my-custom-frame"
  style={{ padding: '20px', minHeight: '200px' }}
>
  Styled content
</NineSliceFrame>

TypeScript

This package includes TypeScript definitions out of the box.

Requirements

• React >= 18.0.0

License

MIT © Callum Gander

Links

• Main Repository
• Live Demo
• Report Issues