https://github.com/anubra266/animated-pandacss
Use Animate.css with Panda CSS
https://github.com/anubra266/animated-pandacss
animate-css panda-css
Last synced: 11 months ago
JSON representation
Use Animate.css with Panda CSS
- Host: GitHub
- URL: https://github.com/anubra266/animated-pandacss
- Owner: anubra266
- Created: 2023-08-17T20:48:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-21T22:00:42.000Z (over 1 year ago)
- Last Synced: 2025-04-28T17:13:07.055Z (11 months ago)
- Topics: animate-css, panda-css
- Language: TypeScript
- Homepage: https://anubra266.github.io/animated-pandacss/
- Size: 452 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## About
It's a preset for [Panda CSS](https://panda-css.com) that adds [Animate.css](https://animate.style) animations to your project.
## Install
```bash
npm i -D animated-pandacss
#or
yarn add -D animated-pandacss
#or
pnpm i -D animated-pandacss
```
## Usage
Add as first item of presets in your [Panda](https://panda-css.com) config.
```ts
import { defineConfig } from '@pandacss/dev'
export default defineConfig({
// Other config...
presets: ['animated-pandacss', '@pandacss/dev/presets'],
})
```
You can now use it in your project.
```jsx
Animated element
```
You can play around with the animations in the [docs](https://anubra266.github.io/animated-pandacss/)
## Sponsors ✨
Thanks goes to these wonderful people
