---
## 🌟Overview
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.
## ✨ Features
- **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.
## 🚀 Getting Started
### 📦 Installation
```bash
# with pnpm
pnpm add actify
# with yarn
yarn add actify
# with npm
npm install actify
```
### 💻 Usage
```jsx
import { Button } from 'actify'
export default () => {
return
}
```
Refer to the [documentation](https://actifyjs.com/getting-started/installation) for in-depth information on each component and their usage.
## 📚 Documentation
Explore our [documentation](https://actifyjs.com/getting-started/installation) for detailed insights, examples, and customization options for each component in the Actify library.
## 🚥 Roadmap
Our goals is convert all [Material Web](https://github.com/material-components/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](./LICENSE.md) file for details..
## 🙏 Acknowledgments
- Special thanks to our contributors and the open-source community for making Actify possible.
- Highly inspired by [Vuetify](https://vuetifyjs.com) 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 [hello@actifyjs.com](mailto:hello@actifyjs.com).
Happy coding with Actify! 🚀
================================================
FILE: apps/docs/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
/dist/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
================================================
FILE: apps/docs/content/components/accordion.md
================================================
---
title: Accordion
description: Accordion display a list of high-level options that can expand/collapse to reveal more information.
---
## Usage
## Tips
`asChild` prop can use to override `Header` style and `Content` style
## Props
| Props | Type | Description | Default |
| ---------- | --------- | ---------------------------------------------------------------------------- | ----------- |
| `open` | `array` | Set which index item is open. eg. [,true] stands for the second item is open | `[]` |
| `multiple` | `boolean` | Allow multiple items to be expanded at the same time. | `undefined` |
================================================
FILE: apps/docs/content/components/app-bars/bottom-app-bar.md
================================================
---
title: Bottom app bar
description: Bottom app bars display navigation and key actions at the bottom of mobile and tablet screens
---
## Usage
================================================
FILE: apps/docs/content/components/app-bars/top-app-bar.md
================================================
---
title: Top app bars
description: The top app bar displays information and actions relating to the current screen.
---
## Usage
================================================
FILE: apps/docs/content/components/autocomplete.md
================================================
---
title: Autocomplete
description: Autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API.
---
## Usage
================================================
FILE: apps/docs/content/components/avatar.md
================================================
---
title: Avatar
description: Avatar is a component that can be used to display a user's avatar.
---
## Usage
================================================
FILE: apps/docs/content/components/badges.md
================================================
---
title: Badge
description: Badges show notifications, counts, or status information on navigation items and icons
---
## Usage
## Props
| Props | Type | Description | Default |
| ------- | ----------------- | ------------------------- | ------- |
| `value` | `string` `number` | The content of the badge. | `null` |
| `color` | `string` | The color of the badge. | `error` |
================================================
FILE: apps/docs/content/components/before-after.md
================================================
---
title: Before After
description: Before after show a before and after image of a product.
---
## Usage
## Props
| Props | Type | Description | Default |
| --------- | ----- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| `before` | `url` | original image url | `null` |
| `after` | `url` | after image url | `null` |
| `bgImage` | `url` | after image background image | |
================================================
FILE: apps/docs/content/components/buttons/button.md
================================================
---
title: Button
description: Buttons have label text that describes the action that will occur if a user taps a button.
---
## Usage
> Notice! Button component under react-router Link component will cause refresh page.
- Solution 1: add onPress(e=>e.preventDefault()) to Button component
- Solution 2: put Link component under Button component
## Props
| Name | Type | Default | Description |
| ------------------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| form | `string` | — | The
