Warning I am sorry to say that as of June 28 2023, DecaUI is no longer actively maintained.

DecaUI provides a set of accessible and customizable React components that make it easy to quickly prototype and develop stunning websites.

npm install @deca-ui/react

Here is a simple example of a basic app using DecaUI's Button component:

import { Button } from '@deca-ui/react';

function App() {
  return <Button variant="solid">Hello World</Button>;
}

With DecaUI, developers can use the centralized theming system anywhere within their application with shorthand names for css properties.

<Box
  sx={{
    marginRight: '2rem',
    marginLeft: '2rem',
    marginTop: '2rem',
    marginBottom: '2rem',
  }}
>
  <Input placeholder="Email Address" />
  <Input placeholder="Password" />
  <Button
    sx={{
      width: '100%',
    }}
  >
    Create Account
  </Button>
</Box>

<Box css={{ m: '$3' }}>
  <Input placeholder="Email Address" />
  <Input placeholder="Password" />
  <Button maxWidth>Create Account</Button>
</Box>

The main problem with other UI libraries is that it's confusing to create consistent webpage layouts with them. DecaUI allows developers to utilize a root theme object which serves properties following the System UI specification.