DecaUI

DecaUI is production-ready themeable component library built with StitchesJ...

Component ToolkitReact
deca-org/deca-uiwww.deca-ui.com@deca-ui/react

README

DecaUI logo

DecaUI

Overview of Components

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


Warning

DecaUI is in beta and is being actively developed.


Getting Started


  1. ```
  2. npm install @deca-ui/react
  3. ```

Using a component


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

  1. ```jsx
  2. import { Button } from '@deca-ui/react';

  4. function App() {
  5.   return <Button variant="solid">Hello World</Button>;
  6. }
  7. ```

Click here for the full documentation


What's so different about DecaUI


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

Custom CSS with other UI libraries


  1. ```jsx
  2. <Box
  3.   sx={{
  4.     marginRight: '2rem',
  5.     marginLeft: '2rem',
  6.     marginTop: '2rem',
  7.     marginBottom: '2rem',
  8.   }}
  9. >
  10.   <Input placeholder="Email Address" />
  11.   <Input placeholder="Password" />
  12.   <Button
  13.     sx={{
  14.       width: '100%',
  15.     }}
  16.   >
  17.     Create Account
  18.   </Button>
  19. </Box>
  20. ```

Custom CSS with DecaUI


  1. ```jsx
  2. <Box css={{ m: '$3' }}>
  3.   <Input placeholder="Email Address" />
  4.   <Input placeholder="Password" />
  5.   <Button maxWidth>Create Account</Button>
  6. </Box>
  7. ```

Our focus is consistency


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.

License


Heril Saha

MIT @ Heril Saha

Thank you

React Status
Thanks to React Status for showcasing this project on their newsletter (issue #323)!