https://github.com/tech-systems/panes
🎉📱 Create dynamic modals, cards, panes for your applications in few steps. One instance – Thousands solutions. Any framework and free.
https://github.com/tech-systems/panes
card cordova css-card drawer ionic mobile modal pwa sheet touch web3
Last synced: 26 days ago
JSON representation
🎉📱 Create dynamic modals, cards, panes for your applications in few steps. One instance – Thousands solutions. Any framework and free.
- Host: GitHub
- URL: https://github.com/tech-systems/panes
- Owner: tech-systems
- License: mit
- Created: 2019-10-26T22:14:44.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-07T01:37:56.000Z (8 months ago)
- Last Synced: 2025-05-04T02:16:10.037Z (about 1 month ago)
- Topics: card, cordova, css-card, drawer, ionic, mobile, modal, pwa, sheet, touch, web3
- Language: TypeScript
- Homepage: https://panejs.com
- Size: 34.7 MB
- Stars: 711
- Watchers: 12
- Forks: 42
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
![]()
Get Started |
Demonstration |
Documentation# Cupertino Panes
[](https://circleci.com/gh/tech-systems/panes)



[](https://www.typescriptlang.org/)
[](https://github.com/airbnb/javascript)
[](https://opencollective.com/cupertino-pane)
### Cupertino Panes is multi-functional modals, cards & panes with touch technologies.#### One instance – Thousands solutions.
* **Small.** 12kb (minified and gzipped bundle with all modules). No dependencies.
* **Reusable.** Create your configuration once. Use everywhere.
* **Modularized.** Add extra features to your panes and create own modules.
* **Accelerated.** Hardware accelerated transitions and amazing native behavior.
* **Progressive.** Useful for mobile/web/hybrid applications.> Right like in Apple Maps, Apple Stocks, Apple Music and other modern apps.
⭐ We appreciate your star, it helps!
## Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/cupertino-pane/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/cupertino-pane/contribute)]
## Demonstration
- [Modal](https://panejs.com/demo/modal.html)
- [Base](https://panejs.com/demo/base.html)
- [Overflow Top](https://panejs.com/demo/overflow-top.html)
- [Auto Height](https://panejs.com/demo/auto-height.html)
- [Top-to-Bottom](https://panejs.com/demo/top-to-bottom.html)
- [Synthwave](https://panejs.com/demo/synthwave.html)
- [Picture-in-Picture](https://panejs.com/demo/picture-in-picture.html)
- [Rich notifications](https://panejs.com/demo/rich-notifications.html)
- [Z-stack full](https://panejs.com/demo/z-stack-full.html)
- [Z-Stack simple](https://panejs.com/demo/z-stack-simple.html)
- [3D Push](https://panejs.com/demo/3d-push.html)
- [Backdrop drag-opacity](https://panejs.com/demo/backdrop-drag-opacity.html)
- [Overflow Top-Middle](https://panejs.com/demo/overflow-top-middle.html)
- [Draggable Over](https://panejs.com/demo/draggable-over.html)
- [Prevent Dismiss](https://panejs.com/demo/prevent-dismiss.html)
- [Follower](https://panejs.com/demo/follower.html)
- [Apple Clips](https://panejs.com/demo/apple-clips.html)
- [Starbucks](https://panejs.com/demo/starbucks.html)
![]()
![]()
![]()
![]()
![]()
![]()
## Docs & Guidelines
Documentation moved [here](https://panejs.com)## Future Goals
Project under regularly maintanance and bug fixes.
All **new features** and **new investigations** moved to open collective [Goals](https://opencollective.com/cupertino-pane/conversations/all-goals-and-featured-packages-o60ddaqg)## Contributors
We are welcome contributions of all kinds from anyone.
Please review the [contributing](https://github.com/tech-systems/panes/blob/master/CONTRIBUTING.md) guideline.Commit Message Format [angular commit format](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format)
## License
Licensed under the MIT License. [View license](/LICENSE).