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 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: "md" }}>
<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 consistant webpage layouts with them. DecaUI allows developers to utilize a root theme object which serves properties following the System UI specification.