mineral-ui.netlify.app Open in urlscan Pro
2a05:d014:275:cb00:c26c:5b6d:e2c8:e5a  Public Scan

Form analysis
0 forms found in the DOM

Text Content

MINERAL

GuidesWhat’s NewComponents
The Themes are Always Changing, but the Tokens Stay the Same


BUILD MODERN PRODUCTS FASTER

Mineral UI is an open-source design system created to simplify building
appealing, modern software experiences. It is the culmination of designers and
developers working together to give teams the ability to ship high-quality
products faster.

Get StartedView on GitHub


SIMPLICITY, QUALITY, SPEED — PICK THREE

People expect modern, engaging experiences that work. Mineral makes this easier
by providing common patterns, reusable components and design guidelines that are
visually appealing, consistent and easy to use.

By using individually consumable React components, teams can build, launch, and
maintain high quality experiences with greater speed and efficiency.

Discover how our guidelines can help your next project
Magenta#d6246ePurple#9656d6Indigo#6767e6


SWITCH IT UP WITH THEMES

It’s easy to match Mineral components to a product experience with themes. With
just a few lines of code, change the theme for every component or constrain the
change to only affect a portion of them. Themes are simple enough to quickly
change the color palette and powerful enough to adjust a whole host of other
properties.

Learn About Themes


ACCESSIBILITY BUILT-IN

Mineral has been designed and built to be accessible to all from the very
beginning. The components do the hard work for you, through the consistent
application of color contrast ratios, standards compliant markup, and thoughtful
design, informed by researching best practices and testing with assistive
technologies.


DROP-IN READY

Mineral components are fully encapsulated, designed for composability, and ready
to be dropped in your React project. Each will appear and behave correctly
without requiring additional styles nor adversely affecting styles already
written. They do what you need them to, and nothing else.

Mineral


LET’S GET STARTED

 1. Install the Mineral UI package and its dependencies using npm or yarn
    
     npm i mineral-ui emotion-theming @emotion/core @emotion/is-prop-valid @emotion/styled react react-dom

 2. Wrap your app in a ThemeProvider at its root for styling
    
     import React from 'react';
     import { render } from 'react-dom';
     import Button from 'mineral-ui/Button';
     import { ThemeProvider } from 'mineral-ui/themes';
    
     function App() {
       return (
         <ThemeProvider>
           <Button>
             Hello World
           </Button>
         </ThemeProvider>
       );
     }
    
     render(<App />, document.getElementById('app'));

 3. Mineral is open-source. Contribute!

Read the full documentationView on GitHub

Copyright © 2017 CA Technologies

We welcome feedback and contributions on GitHub