:atom: Build virtual reality experiences with A-Frame and React.

Overview

aframe-react

I recommend using vanilla A-Frame and aframe-state-component with static templating over aframe-react. React wastes a lot of cycles and incurs a lot of memory garbage. aframe-react is often abused where it is too easy to place 3D/real-time logic at the React layer, causing poor performance (e.g., doing React renders on ticks). aframe-react applications frequently ignore the prescribed ECS framework of A-Frame. Internally, React does tons of computation to compute what changed, and flushes it to the entire application. It is apparent React ecosystem does not care much about memory as most examples allocate functions and objects in the render method, and where immutables are popular. With only ~10ms per frame to do all computation, there is little room for React's massive system.


Build virtual reality experiences with A-Frame and React.

Examples

Fear of the Sky by Amnesty International UK Snowboards MathworldVR

Installation

Install with npm or yarn.

npm install --save aframe aframe-react react react-dom
yarn add aframe aframe-react react react-dom

Example

import 'aframe';
import 'aframe-particle-system-component';
import {Entity, Scene} from 'aframe-react';
import React from 'react';
import ReactDOM from 'react-dom';

class VRScene extends React.Component {
  render () {
    return (
      <Scene>
        <Entity geometry={{primitive: 'box'}} material={{color: 'red'}} position={{x: 0, y: 0, z: -5}}/>
        <Entity particle-system={{preset: 'snow'}}/>
        <Entity light={{type: 'point'}}/>
        <Entity gltf-model={{src: 'virtualcity.gltf'}}/>
        <Entity text={{value: 'Hello, WebVR!'}}/>
      </Scene>
    );
  }
}

ReactDOM.render(<VRScene/>, document.querySelector('#sceneContainer'));

See aframe-react-boilerplate for a basic example.

Introduction

A-Frame

A-Frame is a web framework for building virtual reality experiences. Since A-Frame is built on top of the DOM, web libraries such as React, Vue.js, Angular, Ember.js, d3.js are able to sit cleanly on top of A-Frame.

A-Frame is an entity-component-system (ECS) framework exposed through HTML. ECS is a pattern used in game development that favors composability over inheritance, which is more naturally suited to 3D scenes where objects are built of complex appearance, behavior, and functionality. In A-Frame, HTML attributes map to components which are composable modules that are plugged into <a-entity>s to attach appearance, behavior, and functionality.

Released on the same day as A-Frame, aframe-react is a very thin layer on top of A-Frame to bridge with React. aframe-react passes React props to directly A-Frame using refs and .setAttribute(), bypassing the DOM. This works since A-Frame's .setAttribute()s are able to take non-string data such as objects, arrays, or elements and synchronously modify underlying 3D scene graph.

// aframe-react's <Entity/> React Component
<Entity geometry={{primitive: 'box', width: 5}} position="0 0 -5"/>

// renders
<a-entity>

// and then applies the data directly to the underlying 3D scene graph, bypassing the DOM.
<a-entity>.setAttribute('geometry', {primitive: 'box', width: 5});
<a-entity>.setAttribute('position', '0 0 -5');

aframe-react provides the best of both worlds between A-Frame and React, the 3D and VR-oriented entity-component architecture of A-Frame, and the view and state management ergonomics of React, without penalties of attempting to use React for a VR application.

Making React Viable

A-Frame and aframe-react gives some viability for React to use in VR applications. The value proposition of React is limited to the 2D Web:

  • Improve rendering performance for 2D web pages by reducing calls to the browser's 2D layout engine via the virtual DOM.
  • Provide an predictable application structure for large 2D web applications through a structured nesting of React components, data binding, and one-way data flow.

However, these propositions fall short in 3D and VR applications:

  • In 3D and VR applications, including A-Frame, the 2D browser layout engine is not touched. Thus React's reconciliation engine can become an unpredictable performance liability for little benefit.
  • In 3D and VR applications, objects are not structured in a top-down hierarchy like 2D web applications. 3D objects can exist anywhere and interact with any other 3D object in a many-to-many manner. But React's paradigm prescribes data flow from parent-to-child, which makes it restrictive for 3D and VR applications.

A-Frame and aframe-react gives meaning and purpose to React: A-Frame provides an actual DOM for React to reconcile, diff, and bind to.

React also raises questions around performance; React is a very large library designed for a 60fps 2D Web, is it equipped to handle 90fps VR applications? 90 prop updates per second per object for many objects through React's engine causes concern in the overhead added for each operation.

aframe-react lets A-Frame handle the heavy lifting 3D and VR rendering and behavior. A-Frame is optimized from the ground up for WebVR with a 3D-oriented entity-component architecture. And aframe-react lets React focus on what it's good at: views, state management, and data binding.

Entity-Component Meets React

A-Frame's entity-component-system (ECS) pattern is tailored for 3D and VR applications. What React did for 2D web applications is what ECS did for 3D applications in terms of providing a useful abstraction. ECS promotes composability over hierarchy. In 3D applications, composability refers to composition of appearance, behavior, and logic rather than having fixed blocks. This lets us do things like define a flying robot that explodes on contact and makes robot sounds by snapping together a pre-existing model component, explode component, event handler component, sound component, and flying component.

Unfortunately, React (and the 2D web for that matter) is heavily hierarchical, which is not suited for 3D. Whereas 2D web development consisted of structuring and laying out from an assorted set of fixed 2D elements (e.g., <p>, <a>, <img>, <form>), 3D development involves objects that are infinite in complexity and type. ECS provides an easy way of defining those objects by mixing and matching plug-and-play components.

With aframe-react, we get the best of both worlds. The 3D and VR architecture of A-Frame, and the view and state ergonomics of React. React can be used to bind application and state data to the values of A-Frame components. And we still have access to all the features and performance of A-Frame as well as A-Frame's community component ecosystem.

API

aframe-react's API is very thin on top of A-Frame, less than 200 lines of source code. The API consists of just two React Components: <Entity/> and <Scene/>.

<Entity {...components}/>

<Entity/> wraps <a-entity>, the entity piece of the entity-component-system pattern. Plug in A-Frame components as React props to attach appearance, behavior, or functionality to the <Entity/>.

<Scene>
  <Entity
    geometry={{primitive: 'box', width: 5}}
    material={{color: red, roughness: 0.5, src: texture.png}}
    scale={{x: 2, y: 2, z: 2}}
    position={{x: 0, y: 0, z: -5}}/>
</Scene>

Community A-Frame components can be imported and installed through npm:

import 'aframe-particle-system-component';
import 'aframe-mountain-component';

// ...

<Scene>
  <Entity mountain/>
  <Entity particle-system={{preset: 'snow', particleCount: 5000}}/>
</Scene>

primitive

To use A-Frame primitives, provide the primitive prop with the primitive's element name (e.g., a-sphere). Mappings can be applied the same as in HTML through React props:

<Entity primitive='a-box' color="red" position="0 0 -5"/>
<Entity primitive='a-sphere' color="green" position="-2 0 -3"/>
<Entity primitive='a-cylinder' color="blue" position="2 0 -3"/>
<Entity primitive='a-sky' src="sechelt.jpg"/>

events

To register event handlers, use the events prop. events takes a mapping of event names to event handler(s). Multiple event handlers can be provided for a single event name by providing an array of functions. Try not to pass in inline functions to not trigger unnecessary React renders. Pass in binded functions instead.

For example, using the synthetic click event provided by A-Frame's cursor component, or a collided event possibly provided by a physics component.

handleClick = () => {
  console.log('Clicked!');
}

handleCollide = () => {
  console.log('Collided!');
}

render() {
  return (
    <Scene>
      <Entity events={{
        click: this.handleClick,
        collided: [this.handleCollide]}}/>
    </Scene>
  );
}

aframe-react does not support React-style onXXX event handlers (e.g., onClick). Unlike 2D web pages, VR sites are composed entirely of custom synthetic event names (which could have hyphens, be all lowercase, be camelCase, all uppercase, camel case, etc.,). The possible event names are infinite. The events prop makes it explicit what the event names to handle are.

_ref

Use aframe-react's _ref prop to add a callback to the underlying <a-entity> DOM node:

<Entity _ref={this.entityCallback}/>

<Scene {...components}/>

<Scene/> extends <Entity/> and renders <a-scene> instead of <a-entity>. Place all <Entity/>s as a child of the <Scene/> Component. There should only be one <Scene/> per page:

<Scene>
  <Entity/>
</Scene>

Best Practices

Let A-Frame and three.js handle the heavy lifting of 3D rendering and behavior, and delegate React to what it was meant for: views, state management, and data binding.

For example, don't create requestAnimationFrames to continuously throw React prop updates to A-Frame. Instead, create an A-Frame component with a tick handler such that everything is done in memory with little overhead. Do however use React to set up initial state and data binding that might configure that A-Frame component.

Using with Preact

aframe-react works with Preact. Since aframe-react uses React.Component, we have to tell Webpack to alias that to Preact.Component:

resolve: {
  alias: {
    react: 'preact'
  }
}
Issues
  • Primitives turn into geometry={{primitive:box}} when updating any geometry attribute with react state

    Primitives turn into geometry={{primitive:box}} when updating any geometry attribute with react state

    Hi, I'm working on a small aframe-react app where I need to update different geometry attributes via react state (like this: geometry={{ width: this.state.width }}).

    When I'm using the geometry.primitive property everything works as expected, but when I'm using Primitives or the aframe-react-components module, all aframe-primitives are getting updated to geometry={{ primitive: 'box' }} when I update the react state.

    This works as expected:

    <Entity
      geometry={{ primitive: 'plane', width: this.state.width, height: '2' }}
      material={{color: 'blue' }}
      position='-4 -1.5 -8'
      onClick={this.changeWidth.bind(this)} />
    

    This works onload, but when I update this.state.width the geometry.primitive of the <a-plane />-Element changes to 'box'

    <Entity
       primitive='a-plane'
       geometry={{ width: this.state.width, height: '2' }}
       material={{color: 'blue' }}
       position='-4 2.5 -8'
       onClick={this.changeWidth.bind(this)} />
    

    I used the aframe-react-boilerplate to build a basic demo of the bug. The upper row uses aframe Primitives, the lower row uses the geometry.primitive property. Live Demo with v0.4.0 (Code)

    | onload | after this.setState({}) | | ------------- | ------------- | | before-state-update | after-state-update |

    bug 
    opened by Stefie 15
  • `<Entity camera/>` turns into `<Entity camera=`">

    `` turns into ``

    We have to do <Entity camera=""/>. Need to tell aframe-react to not treat those as props or something.

    opened by ngokevin 12
  • a-collada-model - model does not appear

    a-collada-model - model does not appear

    I'm trying to run the "Anime UI" example from aframe on aframe-react, but I'm unable to load engine.dae. It just does not appear.

    My Scene contains the following code:

    <a-assets>
      <a-asset-item id="engine" src="models/engine.dae" />
    </a-assets>
    
    <Entity primitive="a-entity" position="1.75 0 1.2" rotation="0 28 0">
      <Entity primitive="a-camera" near="0.1" user-height="0" />
    </Entity>
    
    <Entity primitive="a-entity" position="0 0 -3">
      <Entity primitive="a-collada-model" src="#engine" rotation="90 0 0" scale="18 18 18" />
    </Entity>
    

    Can anyone please tell me what I'm doing wrong and why the model is not appearing.

    Thanks!

    opened by anton6 11
  • Support generic event names

    Support generic event names

    Note: Conflicts are due to being based off commit ef1ecc7. For more info, see https://github.com/ngokevin/aframe-react/pull/23#issuecomment-252394171. For the actual diff of this PR, see here.

    Note 2: This PR supersede's https://github.com/ngokevin/aframe-react/pull/36

    This PR removes the limitation of attached events being those listed in the propTypes. Instead, any prop that matches /^on[A-Z]/ will be converted from camelCase to kebab-case and attached as an event listener.

    For example, the aframe-click-drag-component emits events dragstart, dragend, dragmove, so the usage of it with aframe-react would be:

    <Entity click-drag
      geometry="primitive: box" material={{color: this.state.color}}
      position="0 0 -5"
      onDragstart={()=>console.log('drag started')}
      onDragend={()=>console.log('drag ended')}
    >
    
    opened by jesstelford 10
  • Aframe primitive mappings and systems support

    Aframe primitive mappings and systems support

    This is one of many attempts I've had at getting this to work over the last week. And it still doesn't work 100%.

    Let me know your thoughts on the below - any suggestions?

    Known issues

    • Systems don't seem to work 100%. In particular the physics component is a bit odd. It appears to half work, starting some of the physics simulation, but the position and rotation components have values that are NaN. When the exact same structure is used outside of aframe-react, it works without problem.
    • The issues go away if the inspector is opened then closed (Wha!?)

    Other attempts

    • Using debug on the scene. Didn't appear to have any noticable effect
    • Using flushToDOM on the ref once it was available. Also didn't seem to make much change
    • Listening for the entity/scene loaded event, then using flushToDOM. This had a similar result to the one in this PR

    Example

    The kyeboard controls component isn't correctly added to the entity with the camera. You can see this by using A/D to move the camera. The expected behaviour is for it to rotate. The observed behaviour is strafing.

    import React from 'react';
    import {Scene, Entity} from 'aframe-react';
    import aframe from 'aframe';
    import ReactDOM from 'react-dom';
    import aframeExtras from 'aframe-extras';
    import aframeKeyboardControls from 'aframe-keyboard-controls';
    
    aframe.registerComponent('keyboard-controls', aframeKeyboardControls);
    aframeExtras.primitives.registerAll(aframe);
    aframeExtras.controls.registerAll(aframe);
    
    const Catch = React.createClass({
      render() {
        return (
          <Scene className="scene">
    
            <Entity primitive="a-grid" position="0 0 0" />
    
            <Entity
              primitive="a-box"
              position="0 3 -2"
              width="0.5"
              height="0.5"
              depth="0.5"
              color="#EF2D5E"
            />
    
            <Entity
              camera="userHeight: 1.6"
              keyboard-controls="mode: fps"
              universal-controls="movementEnabled: false; rotationControls: hmd"
              position="0 1.6 4"
            />
    
          </Scene>
        );
      },
    });
    
    document.addEventListener('DOMContentLoaded', _ => {
      ReactDOM.render(<Catch />, document.querySelector('#catch-scene'));
    });
    
    opened by jesstelford 10
  • Can you use aframe-text-component with this

    Can you use aframe-text-component with this

    You wrote a cool text component, but I cant seem to get it to be wrapped since its not a primitive. Any suggestions on to how this would work?

    opened by alexwasner 9
  • Use of the asset management system within aframe-react?

    Use of the asset management system within aframe-react?

    It's unclear to me how we use the asset management system- when combining these two abstractions. Like in here, for example, we're using a reference id- if we were using React, seems like we'd want the a-assets to be its own component. https://github.com/aframevr/aframe/blob/master/examples/boilerplate/360-video/index.html

    opened by sdras 8
  • Pass empty props to aframe as

    Pass empty props to aframe as ""

    opened by shea-hawkins-zz 8
  • Do not discard non-component properties when using primitives

    Do not discard non-component properties when using primitives

    Hacking on a short hand library for using aframe react's primitives in aframe-react-components. Essentially mapping:

    <Sphere radius={5} /> to <Entity primitive='a-sphere' radius={5} /> which should map to <a-sphere radius='5' />

    But currently, the short hand properties provided by primitives are discarded, requiring a user to define with the full component mapping, like <Entity primitive='a-sphere' geometry={{ radius: 5 }} />.

    Is it possible to know these mappings for stock primitives? Dug around a bit, and couldn't seem to find a way to expose these via the AFRAME global. Still new to aframe-react, so I might be missing something, but if this sounds good (and it's possible to get these mappings), I'll work on a PR

    bug 
    opened by jsantell 8
  • Performance

    Performance

    I like the concept of the type of coding patterns that aframe-react allows us to use in defining 3D scenes,

    but it seems like there is a performance concern: props (f.e. position) can be passed to the React components as arrays of numbers, which get converted into strings to be passed into the custom elements, which get converted back into numbers for use internally by A-Frame/Three.js.

    That 3-step conversion will happen on every tick while animating a component's prop like position repeatedly.

    Is it something to be concerned about? How do you recommend handling animations?

    opened by trusktr 8
  • reverse mouse drag

    reverse mouse drag

    Hi, is there a way to invert the mouse drag event?

    opened by arch-stefanozanetti 0
  • Why is this image being loaded both by react and then by frame?

    Why is this image being loaded both by react and then by frame?

    Hello!

    I noticed some odd behaviour. When I'm loading a particular image, "SI.jpg" in the attached screenshot, I've noticed both react and aframe make independent requests to load it. Does anyone have any idea why this might be happening?

    Screenshot 2020-03-30 at 11 12 50

    (The image is requested in an <a-assets> <img> tag)

    opened by rvanderspuy 1
  • Unable to render gltf model

    Unable to render gltf model

    Hi,

    I am using following versions of aframe and aframe-react

    "aframe": "^1.0.3",
    "aframe-react": "^4.4.0",
    

    I am trying to render a gltf model -

        <main>
          <Container className={classes.cardGrid} maxWidth="lg">          
    
            <Scene embedded>
              <a-assets>
                <a-asset-item id="earth" src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.glb?1542147958948"></a-asset-item>       
              </a-assets>
             
              <a-box color="red" depth="2" height="4" width="0.5" position="0 0 -2"></a-box>
    
              <Entity gltf-model={{src:'#earth'}}></Entity>
           
            </Scene>
          </Container>
        </main>
    

    but while the box is rendered, the gltf model does not get rendered. Could you please help?

    opened by nirajupadhyay11 3
  • Update README.md

    Update README.md

    The example code didn't work out of the box for me because it was missing an aframe-particle-system-component install

    opened by christikaes 0
  • Fixed some issues

    Fixed some issues

    fixed loading-screen component bug: supermedium#127 fixed setAttribute/removeAttribute logic for use AFRAME components with empty data

    opened by khlevon 0
  • @types

    @types

    Is there any one that wrote the type definitions for aframe-react yet? I can not find them and having issues using this library for a more complex project.

    opened by porschuetz 3
  • wasd acceleration has no effect

    wasd acceleration has no effect

    It seems like wasd-acceleration prop has no effect. I've created a codesandbox so it is easy to see the bug. The acceleration is set to 10000 but there is no change in acceleration from the default acceleration. This issue is also reproducible with the boilerplate mentioned in the README.

    opened by amilajack 1
  • animation events

    animation events

    Is there a possibility to attach to for example "animationend"?

    I tried to add events={{ animationend=... }} to my animation__test property, but the console says thats an unknown property. I also tested to add it to the Entity events. But doesnt work.

    I use aframe-react in version 4.4.0 and aframe in version 0.9.2

    opened by Pukka922 0
  • Embedding scene in react application does not work

    Embedding scene in react application does not work

    Hey guys,

    I am having trouble getting a simple aframe scene into my react application. I simply want to depict .gltf files in my app to preview them and click on Full Screen to walk around in it. I used a simple example from aframe-react to insert a basic scene:

    <Scene embedded={true}>
            <Entity geometry={{primitive: 'box'}} material={{color: 'red'}} position={{x: 0, y: 0, z: -5}}/>
            <Entity particle-system={{preset: 'snow'}}/>
            <Entity light={{type: 'point'}}/>
            <Entity gltf-model={{src: 'virtualcity.gltf'}}/>
            <Entity text={{value: 'Hello, WebVR!'}}/>
    </Scene>
    

    (The gltf-model part is pointing to a file I do not own. I can comment this part out and it still works.) Without the embedded tag, I see the Scene on my page. It is in front of the other elements and I can only click the scene to interact with. That is why I want to embed it in a smaller window. But as soon as I include the embedded tag, the scene is not displaying anymore and I get some errors which I can't solve:

    THREE.WebGLShader: Shader couldn't compile.
    THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog
    WebGL: INVALID_OPERATION: useProgram: program not valid
    THREE.WebGLRenderer: Context Lost.
    The development server has disconnected.
    Refresh the page if necessary.
    

    Can someone help with this? Maybe has a different idea to get a preview of a scene? Like I mentioned before, I want to depict .gltf files instead of plain code.

    Thank you!

    opened by tgeis02 2
Releases(v4.0.3)
  • v4.0.3(Mar 28, 2017)

    v4 of aframe-react improves performance, simplifies the API, adds full test coverage, and fixes all open issues in one sweep by changing how React passes down props to A-Frame.

    Before

    Props were serialized to strings (e.g., geometry={primitive: 'box', width: 5} to geometry="primitive: box; width: 5) and dumped into the DOM. A-Frame would receive updates through the DOM. The issues with this was that the logic for serialization was not solid, and going through the DOM was not performant because it meant we often would be serializing to strings only for A-Frame to parse it back into an object.

    Other issues arose with A-Frame not being initialized when React was rendering DOM. Or React rendering React Components in isolation, attempting to initializing components on entities that were not attached to the DOM.

    After

    Props are passed directly to A-Frame through .setAttribute(). A-Frame's .setAttribute()s can handle objects, arrays, and other non-string data so no serialization or parsing is needed. aframe-react uses React's refs to grab a handle on the DOM element, which ensures that the element has mounted before aframe-react tries to pass any data. By removing all logic and passing directly through to A-Frame, things are much simpler and more performant by not having to touch the DOM. Everything is in memory.

    onXXX React-style handlers were removed in favor of the events prop. onXXX caused ambiguity in mapping to custom event names because event names could have hyphens, be lower case, be upper case, or a mix of lower case and upper case. The events objects makes the event names explicit. onXXX may also be confusing because in normal React, those map to events provided by the DOM (e.g., onClick). In VR, these events are purely custom and synthetic.

    events now also correctly handles the removal or addition of event handlers when the events prop is updated.

    As a related change, since props are passed directly to A-Frame as-is, we can no longer pass coordinates in array form (e.g., position={[1, 2, 3]}). We may pass them using objects (i.e., position={{x: 1, y: 2, z: 3}}).

    Source code(tar.gz)
    Source code(zip)
Owner
Supermedium
Space of immersive VR utilities. Maintainers of A-Frame.
Supermedium
InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Shaun Mak 4 Nov 8, 2021
Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps.

?? Pancake UIkit Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark an

PolyPup 1 Nov 4, 2021
A set of React components and hooks used to build pages on Wakanda's apps

Wakanda UIkit is a set of React components and hooks used to build pages on Wakanda's apps. It also contains a theme file for dark and light mode.

wakandaswap 0 Nov 17, 2021
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit System.

Timeless 144 Nov 26, 2021
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui. While some cod

Mat Sz 55 Nov 21, 2021
🎭 A React Native and Expo library to mask text and inputs

This is a library to mask Text and Input components in React Native and Expo (Android, iOS and Web).

Akinn Rosa 197 Nov 20, 2021
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

Mantine 3.1k Nov 27, 2021
Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript, auto-update URL hash and throttle support among others.

React UI ScrollSpy ✨ Installation npm install --save react-ui-scrollspy OR yarn add react-ui-scrollspy ?? Demo Try it your self here! ⚙️ Usage In your

Hussain Pettiwala 10 Nov 21, 2021
ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components

ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components. It has utilities to set or get deep properties of nested data using paths.

Autodesk 18 Nov 10, 2021
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 262 Oct 30, 2021
🌈 A UI Design Language and React UI library

Ant Design An enterprise-class UI design language and React UI library. English | Português | 简体中文 ✨ Features ?? Enterprise-class UI designed for web

Ant Design Team 75.8k Nov 24, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.5k Nov 24, 2021
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 7.6k Nov 24, 2021
Modern and minimalist React UI library.

Modern and minimalist React UI library, originating from Vercel's design. Quick Start run yarn add @geist-ui/react or npm i @geist-ui/react install it

Geist 2.5k Nov 23, 2021
The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI Website:https://chatui.io English | 简体中文 Features ?? Best Practices: The best practice

Alibaba 1.2k Nov 20, 2021
⚛️A beautiful and modern React design system.

Shards React is a free, beautiful and modern React UI kit based on Shards. Documentation & Demo • Official Page Getting Started Getting started with S

DesignRevision 698 Nov 29, 2021
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 18.4k Dec 2, 2021
React UI Components for macOS High Sierra and Windows 10

React UI Components for macOS High Sierra and Windows 10. npm install react-desktop --save Help wanted! I am looking for developers to help me develop

Gabriel Bull 9.3k Nov 21, 2021
A free React landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by

Free React landing page template Open is a free React landing page template designed for developers/makers who want to create a quick and professional

Cruip 1.9k Dec 1, 2021