The 3D tools helps you create the best web 3D app.

English | Português | 简体中文 | Українською | Spanish | 日本語

• 🌈 Cutting-edge and fashionable ui design.
• 📦 A set of high-quality React components out of the box.
• 🛡 Written in TypeScript with predictable static types.
• ⚙️ Whole package of design resources and development tools.
• 📖 Extensive documentation and demos
• 🌍 Support i18n, built-in N+ languages
• 🎨 Powerful theme customization in every detail.

• Modern browsers
• Server-side Rendering
• Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

If you feel awesome and want to support us in a small way, please consider starring and sharing the repo! This helps us getting known and grow the community. 🙏

Visit https://s3d.org/docs to view the full documentation.

1. Installation: Inside your React project directory, install Next 3D by running either of the following:

yarn add @next3d/core @emotion/react
# or
npm i @next3d/core @emotion/react

2. Setup: For Next 3D to work correctly, you need to set up the App at the root of your application.

Go to the root of your application and do this:

import { App } from '@next3d/core';

const Main = () => (
  <App>
    <AppComponent /> // ---> Your App Component
  </App>
);

3. Using Next 3D components: Once Next 3D is installed you can use any of the components as follows. Next 3D uses tree-shaking so the unused modules will not be included in the bundle during the build process and each component is exported separately.

import { Button } from '@next3d/core';

const Component = () => <Button>Click me</Button>;

4. Next 3D allows to manually import components if you need. E.g.

import Button from '@next3d/core/button';

const Component = () => <Button>Click me</Button>;

Please make sure to read the Contributing Guide before making a pull request and commit with Commit Guide.

Thank you to all the people who already contributed to us!

MIT