Install

NPM Package

Example

npm install r3dy

Implementation

Once you've installed the npm package, its time to add a component to your project. In the code snippet below, you can see how this is implemented.

Example

import { Canvas } from '@react-three/fiber'
import { Switch } from 'r3dy'
  
<div className="flex justify-center">
  <div className='h-[200px] w-[300px] '>
    <Canvas shadows>
      <Switch model={1}/>
    </Canvas>
  </div>
</div>

As you can see, the above code generated the switch below it. However there are a few things you want to make note of.

You want to make sure that you have imported the necessary dependencies. Import the desired component from

r3dy

as well as

Canvas

from

@react-three/fiber.

Now that you've included dependencies, wrap your component in a

Canvas

tag. Make sure to include shadows in the

Canvas

tag or they will not show up.

Note: As you can see, the

Canvas

is nested in 2 divs. The first div is meant to contain the

Canvas

. By nature

Canvas

will try to fill as much space as its allowed, so if you dont nest it in a div, and you have margins, it will constantly expand to fit those margins. The second div is used to adjust the placement of the first. As mentioned,

Canvas

took up the entire space of the first div. Now that its contained, you will need another to move it about the page.

Customization

Now that you have the component installed, its time to style! Please head over to our component pages where you will fine more details on how to customize these components to you liking and needs.

Thank you for taking the time to check out R3DY UI