{"id":10783,"library":"elemental","title":"Elemental UI Framework","description":"Elemental is an open-source React & CSS UI Framework designed for building web applications, developed by Thinkmill. The project's latest version is 0.6.1, and its primary focus was to provide a modular set of UI components built to natively implement React patterns, particularly for use with KeystoneJS. While the original vision included being 'currently under development' and responsive to feedback for API experimentation and styling transitions, the project has not seen updates since around 2017, making it effectively abandoned. It supported older React versions (0.14 and 15) and leveraged LESS for styling, requiring a LESS compiler in the build process. Key differentiators included its unopinionated default style and flexible theming capabilities, built upon React.js, LESS, Babel, and Gulp.","status":"abandoned","version":"0.6.1","language":"javascript","source_language":"en","source_url":"https://github.com/elementalui/elemental","tags":["javascript","react","react-component","ui","framework","controls","element","css","less"],"install":[{"cmd":"npm install elemental","lang":"bash","label":"npm"},{"cmd":"yarn add elemental","lang":"bash","label":"yarn"},{"cmd":"pnpm add elemental","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering UI components. Requires older React versions.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM. Requires older React versions.","package":"react-dom","optional":false},{"reason":"Peer dependency for handling CSS transitions in React components. Requires older React versions.","package":"react-addons-css-transition-group","optional":false},{"reason":"Elemental styles are written in LESS, requiring a LESS compiler in the build process for styling to be applied.","package":"less","optional":false}],"imports":[{"note":"Elemental was developed during an era when ES Modules were becoming prevalent, but CommonJS was still common. While ESM `import` syntax is shown in examples, CJS `require` might have been used in older Node.js contexts. Ensure your build system (Webpack/Browserify) handles this appropriately.","wrong":"const { Button } = require('elemental');","symbol":"Button","correct":"import { Button } from 'elemental';"},{"note":"Components are intended to be imported as named exports from the 'elemental' package. Direct deep imports from 'lib/' paths, while sometimes seen in older projects for tree-shaking, are not the officially documented approach and may not work as expected or break in patched versions.","wrong":"import Alert from 'elemental/lib/Alert';","symbol":"Alert","correct":"import { Alert } from 'elemental';"},{"note":"While importing all exports (`* as Elemental`) is syntactically valid, it can lead to larger bundle sizes if not properly tree-shaken by your bundler. Prefer named imports for specific components.","wrong":"import * as Elemental from 'elemental';\nconst MySpinner = Elemental.Spinner;","symbol":"Spinner","correct":"import { Spinner } from 'elemental';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Button, Alert, Spinner } from 'elemental';\n\n// Elemental's styles are written in LESS and need to be imported or compiled.\n// For a modern setup, you would typically configure your build tool (e.g., Webpack)\n// to process LESS files and import the main stylesheet.\n// E.g., in your main JS/TS entry file or a global CSS file:\n// @import './node_modules/elemental/less/elemental.less';\n// Or compile it via CLI: lessc ./node_modules/elemental/less/elemental.less styles.min.css\n\nfunction App() {\n  const [showAlert, setShowAlert] = React.useState(false);\n\n  return (\n    <div>\n      <h1>Elemental UI Demo</h1>\n      <Button onClick={() => alert('Hello from Elemental!')} type=\"primary\">\n        Click Me\n      </Button>\n      <Button onClick={() => setShowAlert(!showAlert)} type=\"link\">\n        Toggle Alert\n      </Button>\n      {showAlert && (\n        <Alert type=\"info\">\n          This is an Elemental Alert!\n          <Button type=\"link\" onClick={() => setShowAlert(false)}>Close</Button>\n        </Alert>\n      )}\n      <div style={{ padding: '20px' }}>\n        <Spinner size=\"lg\" />\n      </div>\n    </div>\n  );\n}\n\nReactDOM.render(<App />, document.getElementById('root'));","lang":"javascript","description":"This quickstart demonstrates rendering a Button, an Alert, and a Spinner component from Elemental UI in a basic React application, including toggling the alert visibility. It highlights the need for LESS compilation for styles."},"warnings":[{"fix":"Use Elemental UI with a compatible React environment (React 0.14.x or 15.x) or consider migrating to a actively maintained UI library. Backporting to newer React versions is highly complex and not recommended.","message":"Elemental UI is built for React versions `^0.14.0 || ^15.0.0`. It is incompatible with modern React versions (16+), requiring significant polyfills or wrappers, and will likely break without extensive modifications due to changes in React's API and lifecycle methods.","severity":"breaking","affected_versions":">=0.6.1"},{"fix":"Ensure your project's build configuration includes a LESS compiler (e.g., `npm install less less-loader --save-dev` and configure Webpack to handle `.less` files). Then, import the main stylesheet: `@import '~elemental/less/elemental.less';` in your global CSS/LESS file.","message":"Elemental UI relies on LESS for its styling. You must configure your build process (e.g., Webpack with `less-loader`) to compile and include the `elemental.less` stylesheet, otherwise components will render unstyled.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"For new projects, avoid Elemental UI. For existing projects, plan for migration to a currently maintained React UI library (e.g., Ant Design, Material UI, Elemental Plus - a separate project for Vue).","message":"The Elemental UI project is effectively abandoned, with its last npm publish and GitHub activity dating back approximately seven years (as of late 2017). This means no further bug fixes, security updates, or feature development will occur.","severity":"breaking","affected_versions":">=0.6.1"},{"fix":"This issue is inherent to using an abandoned library with old dependencies. The most robust fix is migrating to a modern UI library. If strictly adhering to Elemental, ensure all specified peer dependencies are installed, even if deprecated.","message":"The peer dependency `react-addons-css-transition-group` is deprecated in modern React. Using Elemental UI with newer React setups might lead to warnings or require manual integration of `react-transition-group` (its spiritual successor), if a compatible version can even be found for the old React versions Elemental requires.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that your `react` and `react-dom` peer dependencies exactly match the `^0.14.0 || ^15.0.0` range specified by Elemental. Downgrade your React versions if necessary, or use `npm install --legacy-peer-deps` (if applicable) to force install compatible versions.","cause":"This generic React error often indicates a mismatch between Elemental UI's expected React environment (very old versions) and the React version installed in your project, or a misuse of old React APIs.","error":"Error: Invariant Violation: Minified React error #XXX; visit https://reactjs.org/docs/error-decoder.html?invariant=XXX for the full message."},{"fix":"Ensure `less-loader` is installed and properly configured in your Webpack (or equivalent) setup to handle `.less` files. Add `@import '~elemental/less/elemental.less';` to your main stylesheet. Verify `node_modules` is included in your loader paths.","cause":"The main LESS stylesheet for Elemental UI is not being correctly resolved or imported by your build system, or `less-loader` is not configured.","error":"Module not found: Error: Can't resolve 'elemental/less/elemental.less' in 'your-app-path'"},{"fix":"While `prop-types` package can polyfill this for *some* cases, the fundamental incompatibility with modern React due to other API changes remains. The only true fix is to use Elemental with `react@<15.5` or migrate to a new UI library.","cause":"This often occurs when trying to use React components that rely on the `React.PropTypes` API, which was removed in React v15.5. Elemental UI predates this change.","error":"TypeError: Cannot read property 'propTypes' of undefined"}],"ecosystem":"npm"}