actifyjs/actify

🌻React Material Design 3 Components Library

---

🌟Overview

Welcome to Actify, an open-source React Components Library designed to accelerate your React application development. Actify leverages TypeScript, Tailwind CSS, Floating-UI, Framer Motion, Material Design 3, and more to provide a comprehensive set of modern and customizable UI components.

✨ Features

• TypeScript: Benefit from enhanced developer experience and static typing.
• Tailwind CSS: Embrace a utility-first CSS framework for effortless and flexible styling.
• Floating-UI: Elevate your UI with floating elements for a modern and dynamic user experience.
• 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.

🚀 Getting Started

📦 Installation

# with pnpm
pnpm add actify
# with yarn
yarn add actify
# with npm
npm install actify

💻 Usage

import { Button } from 'actify'

export default () => {
  return <Button>Hello Actify</Button>
}

Refer to the documentation for in-depth information on each component and their usage.

📚 Documentation

Explore our documentation for detailed insights, examples, and customization options for each component in the Actify library.

🚥 Roadmap

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		✅

🤝 Contributing

Contributions are always welcome! Thanks to everyone who has already contributed to actify !

📜 License

Actify React Components Library is licensed under the MIT License - see the MIT licensed file for details..

🙏 Acknowledgments

• 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.

📧 Support

If you have any questions or need assistance, feel free to reach out to us at [email protected].

Happy coding with Actify! 🚀

actify's Issues

Add lucide-react install instruction

Describe the bug
In the doc of Text Field, the example imports the lucide-react but does not set any instruction to install it at any pre-guide.

MenuItem hover effect is sometimes broken

Describe the bug
When moving my cursor over several menu items, the hover effect is applied to all items. On a side note, the hover effect is also slow to catch up with the cursor movement.

To Reproduce
Make a Menu with MenuItems.

Expected behavior
Only one MenuItem should have the hover effect at a time.

Screenshots

Screen.Recording.2023-12-31.at.00.08.00.mov

Screen.Recording.2023-12-31.at.00.11.55.mov

Desktop (please complete the following information):

• OS: macOS
• Browser: Firefox/Chromium/Safari
• Version: 121

Segmented Button design issue

Describe the bug
The fill of th button is not properly aligned with the borders / divide line of the button

To Reproduce
Steps to reproduce the behavior:
Just went through the docs and found it

Expected behavior
The background color of the Segment button should align with the border of the button, check m3 docs to know more

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Edge

Add Sheets

It will be great to have bottom sheets like in Material Design
https://m3.material.io/components/bottom-sheets/overview

Typescript

Use typescript or at least add types to DefinitelyTyped