repository·main·Indexed 41 days ago
https://github.com/actifyjs/actifyAn open-source React component library implementing Material Design 3 principles. Built with TypeScript, Tailwind CSS, React-Aria, and Framer Motion, it provides accessible and animated UI components such as Buttons, Cards, Carousels, and App Bars.
Actify is a modern UI component library designed to accelerate React development. It integrates several industry-standard technologies:
Ripple component is a state layer used to visually communicate the status of a component or interactive element (such as clicks or taps) through a ripple animation effect.The Lists component is designed to compose with the following child components:
ListItem: Represents an individual item within the list.ListGroup: Represents a logical grouping of items within the list.TooltipTrigger, which handles the interaction logic (hover, focus, etc.), and Tooltip, which handles the visual overlay and positioning. When used together, the TooltipTrigger automatically manages the connection to the Tooltip.asChild prop to override the default styles of the Header and Content sub-components. This is useful when you want to use your own custom elements or components while maintaining the accordion functionality.Switch component is used to toggle the state of an item on or off. It supports both uncontrolled usage (via defaultSelected) and controlled usage (via isSelected).Navigation rail component is used to allow users to switch between different UI views, specifically optimized for mid-sized devices. It provides a vertical navigation structure typically positioned on the side of the interface.Accordion component displays a list of high-level options that can expand or collapse to reveal more information. Use it to organize content into collapsible sections.IconButton component to implement these in your UI.You can add Actify to your React project using your preferred package manager. Actify is a React component library built with TypeScript, Tailwind CSS, React-Aria, Framer Motion, and Material Design 3.
# with pnpm
pnpm add actify
# with yarn
yarn add actify
# with npm
npm install actify