R3DY Web

R3DY Web is the official documentation website for the R3DY 3D React component library, providing a structured reference for building three-dimensional user interfaces with React Three Fiber. The site is a Next.js application written in TypeScript, styled with Tailwind CSS, and deployed on Vercel. Its content lives in a public GitHub repository under the oslabs-beta organization, alongside the main R3DY library repo.

What is R3DY Web?

R3DY Web is a documentation portal that presents the R3DY component library's API, usage guides, and interactive examples to frontend developers. It takes the library's raw source and documentation pages and renders them into a fast, searchable website hosted at r3dyui.com, with a dedicated docs section at r3dyui.com/docs. Built by the R3DY maintainers, the site itself is also a working demonstration of the components it documents.

Key Features

• Next.js and TypeScript — The site is built with the Next.js React framework and fully typed with TypeScript, enabling static site generation and predictable server-side rendering.
• Tailwind CSS styling — The entire documentation UI uses Tailwind CSS utility classes for consistent, responsive design without a custom CSS framework.
• React Three Fiber examples — Embedded 3D scenes and component demos rely on React Three Fiber, showing real usage of the R3DY library inside the documentation pages.
• Redux state management — The project includes Redux for managing UI state, making it a reference for integrating Redux with a Next.js documentation site.
• CodeSandbox live embeds — Sample components are integrated with CodeSandbox, allowing visitors to run and modify code directly from the browser.
• Vercel hosting — The site is deployed on Vercel, gaining automatic preview builds from pull requests and global edge delivery.
• Dedicated docs section — A structured documentation area at r3dyui.com/docs organizes component guides, making it easy to locate API details and examples.

Who is it for?

• R3DY component users — Developers who want to learn how to use the R3DY 3D component library in their React projects; the docs give them component APIs and live examples.
• React Three Fiber developers — Frontend engineers exploring 3D rendering in React can study this codebase to see how to structure a documentation site for a WebGL component library.
• Open-source maintainers — Teams building a docs site for their own React component library can use R3DY Web as a starting point, since it demonstrates a full stack with Next.js, Tailwind, Redux, and CodeSandbox.
• Technical contributors — Community members who want to improve R3DY's documentation can fork this repository, edit the markdown and examples, and submit pull requests to the main project.

Use cases

• Component library authors — Publish a professional documentation site with interactive playgrounds for 3D React components, modeled directly on R3DY Web's structure.
• Frontend educators — Use the open-source codebase as a teaching example of combining Next.js, TypeScript, React Three Fiber, Redux, and Tailwind in a real application.
• R3DY contributors — Submit corrections and new examples to the documentation by working in this repository, which is linked from the main r3Dy GitHub repo.