The UI components which power the Neos backend application.
This package requires some peerDependencies which you need to install after installing this package, see the package.json.
yarn add @neos-project/react-ui-components
To reduce the bundled size of applications, we enforce singular import statements of components.
You can import components by pointing to the
lib/ folder, f.e.
import Button from '@neos-project/react-ui-components/src/Button/';
Usage WITH CSS modules
index.js file of each component, CSS gets imported and injected as a
Your build-tool (f.e. webpack) may can handle this, but we require some additional PostCSS-plugins to be configured.
In case you don't want this, scroll down to the section below, otherwise go on! :-)
An example webpack setup can be found in
.storybook/webpack.config.js. You can see that we require at least a
CSS modules compliant loader for
*.css files, as well as the
PostCSS-plugins to be properly configured.
In case you have problems with your webpack setup, please attach it within the issue you may want to create.
Usage WITHOUT CSS modules
You can also use the components without any styles provided by this package, but bear in mind that each component
theme prop with the
classNames you need to provide.
In case you want to use the components purely, adjust the import statement to point to the react component only e.g.
import Button from '@neos-project/react-ui-components/src/Button/button.js';
All components can be themed using the react-css-themr package, visit their docs for more information about how this approach works. Our identifiers can be imported e.g.
import identifiers from '@neos-project/react-ui-components/src/identifiers';
Clone this repository, execute
yarn in the root directory of the project.
After the installation succeeded, execute
yarn start to start the
development server of the styleguide.
Setup for developing inside the Neos.Neos.Ui Package
Make a symbolic link inside your Neos installation to your cloned sources od this package. The following example assumes that both installations are in the same folder.
cd YourNeosUiInstanz/Packages/Application/Neos.Neos.Ui/node_modules/@neos-project rm -rf react-ui-components ln -s ./../../../../../../react-ui-components/ .
run the watcher inside the react-ui-components
run the watcher inside the Neos.Neos.Ui Package
cd YourNeosUiInstanz/Packages/Application/Neos.Neos.Ui yarn watch:build
Please folllow these commit guidlines. commit-analyzer
Building for standalone usage outside of Neos
we build a
lib-esm/ folder to be consumed by e.g. webpack.
This is done by
yarn run build-standalone-esm.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.