@karybase/shed-renderer

A configurable React component that renders a 3D shed using Three.js and React Three Fiber.

Install

npm install @karybase/shed-renderer

Usage

import { ShedRenderer } from "@karybase/shed-renderer";

export function ShedPreview() {
  return (
    <div style={{ width: 800, height: 600 }}>
      <ShedRenderer
        width={12}
        depth={16}
        wallHeight={8}
        roofStyle="gable"
        sidingColor="#b17b49"
        roofColor="#252b33"
      />
    </div>
  );
}

The component fills its parent, so its container must have an explicit height.

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | width | number | required | Shed width in feet. | | depth | number | required | Shed depth in feet. | | wallHeight | number | 8 | Wall height in feet. | | roofStyle | "gable" \| "single-slope" | "gable" | Roof geometry. | | sidingColor | string | "#b17b49" | CSS color used for siding. | | roofColor | string | "#252b33" | CSS color used for roofing. | | className | string | — | Class applied to the root element. |

React 19 and React DOM 19 are peer dependencies.

License

UNLICENSED