Welcome to Actify, an open-source React Components Library designed to accelerate your React application development. Actify leverages TypeScript, Tailwind CSS, Reat-Aria, Framer Motion, Material Design 3, and more to provide a comprehensive set of modern and customizable UI components.
- TypeScript: Benefit from enhanced developer experience and static typing.
- Tailwind CSS: Embrace a utility-first CSS framework for effortless and flexible styling.
- React-Aria: React Aria implements accessibility support according to the WAI-ARIA specification, published by the W3C.
- Framer Motion: Bring fluid animations and transitions to your components with Framer Motion.
- Material Design 3: Implement the latest Material Design principles for a cohesive and visually appealing interface.
# with pnpm
pnpm add actify
# with yarn
yarn add actify
# with npm
npm install actifyimport { Button } from 'actify'
export default () => {
return <Button>Hello Actify</Button>
}Refer to the documentation for in-depth information on each component and their usage.
Explore our documentation for detailed insights, examples, and customization options for each component in the Actify library.
Our goals is convert all Material Web components to React Components, not just a React wrapped components.
| Component | Web component | React Component |
|---|---|---|
| Ripple | ✅ | |
| Elevation | ✅ | |
| Focus ring | ✅ | |
| Icon | ✅ | |
| Button | ✅ | |
| Icon button | ✅ | |
| Checkbox | ✅ | |
| Slider | ✅ | |
| Switch | ✅ | |
| TextField | ✅ | |
| Progress indicators | ✅ | |
| Radio | ✅ | |
| Divider | ✅ | |
| Menu | ✅ | |
| Dialog | ✅ | |
| Select | ✅ | |
| SegmentedButton | ✅ | |
| SegmentedButtonSet | ✅ |
Contributions are always welcome!
Thanks to everyone who has already contributed to actify !
Actify React Components Library is licensed under the MIT License - see the MIT licensed file for details..
- Special thanks to our contributors and the open-source community for making Actify possible.
- Highly inspired by Vuetify for its impactful contributions to UI design and development trends.
If you have any questions or need assistance, feel free to reach out to us at hello@actifyjs.com.
Happy coding with Actify! 🚀