Panes is live · free · last verified 7 Nov 2026 · viability monitor
Panes
Free, 12KB framework-agnostic JavaScript library for Cupertino-style modals, cards, and panes.
Panes is the right pick when bundle size and framework portability are the constraint. The 12KB minified and gzipped bundle with zero dependencies is the whole argument, and the /introduction.html gallery — AI Chatbot Modal, Apple Clips, Starbucks, Z-stack and 3D Push demos — means you get Cupertino behavior without writing drag and snap logic. It is a narrower tool than Headless UI, Radix, or Vaul, which give you framework-native primitives and a broader accessibility story; Panes gives you Apple-styled panes and a plugin system for extending them. Choose Panes if you want iPhone-style sheets today with no dependency budget; choose Radix or Headless UI if accessible primitives matter more
Verdict generatedVerified 6d ago · liveness 58/100 · cite: rightaichoice.com/tools/panes
- Front-end developers building cross-framework UI
- Teams with a strict bundle-size or zero-dependency budget
- Mobile, web, and hybrid PWA builders
- Prototypers and indie hackers
- Teams that need a vendor support contract or SLA
- Teams wanting a large prebuilt theme or design-system library
- Projects needing framework-native primitives such as React Portals
We scan live Reddit threads, YouTube comments, X posts, G2 reviews and other communities — and hand you an honest verdict in under a minute.
- Honest verdict, not marketing
- Real pros & cons from real users
- Attributed quotes with receipts
3 free scans · no card needed
Skip Panes if you need broad accessibility primitives, framework-native portaling, or a vendor-backed component library with an SLA rather than a 12KB dependency-free Cupertino pane layer.
Panes is a free, open-source library with no licence fee, sponsored through Open Collective. On cost alone it sits below paid component and modal libraries that charge per seat or per project — but you are trading that licence fee for sponsorship-funded maintenance rather than a vendor roadmap and support contract.
In short
Panes — Free, 12KB framework-agnostic JavaScript library for Cupertino-style modals, cards, and panes. Best for Front-end developers building cross-framework UI, Teams with a strict bundle-size or zero-dependency budget, Mobile, web, and hybrid PWA builders. Free to use.
What is Panes?
Panes — Free, 12KB framework-agnostic JavaScript library for Cupertino-style modals, cards, and panes. Best for Front-end developers building cross-framework UI, Teams with a strict bundle-size or zero-dependency budget, Mobile, web, and hybrid PWA builders. Free to use.
Panes (Cupertino Panes) is a free, open-source JavaScript library that gives you Apple-style sheet, bulletin, and inversed modal panes for progressive web, mobile, and hybrid apps. Instantiate one pane and configure it into thousands of layouts: `new CupertinoPane('pane', { modal: true });` is enough to get a floating sheet on screen. It works with Svelte, Vue, React, Angular, Elixir, or any other front-end environment, so you are not locked into a framework-specific modal stack. The whole bundle ships at 12KB minified and gzipped with all modules included, and it has no third-party dependencies, which keeps it cheap on first load compared to a full component library. Transitions are hardware accelerated for native-feeling drag and snap behavior. You extend it through a modular plugin system rather than patching the core. Appearance follows light and dark themes. The documentation site ships a large gallery of prebuilt configurations — AI chatbot modal, overflow top, top-to-bottom, synthwave, picture-in-picture, rich notifications, z-stack full, z-stack simple, 3D push, backdrop drag-opacity, overflow top-middle, draggable over, prevent dismiss, follower, Apple Clips, and Starbucks layouts — so you can copy a working demo instead of building from scratch. The project is maintained on a regular maintenance and bug-fix footing, with new feature work moved to Open Collective funding, and development itself was engineered, refactored, and supervised using AI tooling. Note that Panes is an interface library, not an AI product: it ships no model and does no inference.
Key features
- Cupertino-style sheet panes
- Bulletin panes
- Inversed modal panes
- 12KB minified and gzipped bundle with all modules
- Zero third-party dependencies
- Any front-end environment: Svelte, Elixir, Vue, React, Angular, vanilla JS
- One-instance, many-configuration API (new CupertinoPane('pane', { modal: true }))
- Modular plugin system for adding your own modules
- Hardware-accelerated transitions and native drag behavior
- Light and dark appearance
- Configurable breakpoints
- Settings, events, public methods, attributes, and CSS variables surfaces
- Prebuilt demo configurations (AI Chatbot Modal, Picture-in-Picture, Rich notifications, Z-stack, 3D Push, Apple Clips, Starbucks and more)
- Mobile, web, and hybrid PWA support
- AI-assisted engineering, refactoring, and supervision of the codebase
Our long-form take written Jul 26, 2026 is more than 90 days old, so it is being re-reviewed against current data and is not shown.
Limitations
- Panes is a focused interface library, not a UI platform.
- It is an interface library with no model and no inference — the AI involvement is in how the code was engineered, refactored, and supervised.
- Future goals on the project site state it is on regular maintenance and bug fixes, with new features and investigations moved to Open Collective goals, so you should not expect rapid addition of new primitives.
- Official support covers the last two versions of every major browser, tested specifically on Chrome (Android, Windows, macOS, Linux), Firefox (Windows, macOS, Linux), Safari (iOS), WkWebView (iOS), and Android WebView.
- It is a small, sponsor- and contributor-funded open-source project, so there is no commercial support desk behind it.
as of 2026-10-02
Researching Panes? Get your full AI stack in 60 seconds.
Free, no signup — tell us your goal and get tools matched to your budget & existing stack.
Is Panes still active?
Panes is live · free · last verified 7 Nov 2026 · viability monitor.
Viability score
How well maintained and how widely used is Panes? Built from what the vendor actually publishes (docs, changelog, tutorials, integrations, pricing), whether the site is live, and how much real users discuss it. How we calculate this
Last calculated: November 2026
How we score →What do users say about Panes?
What people actually say about Panes — is it worth it?
We ran a structured research pass across product reviews, community discussions, and post-purchase forum threads to surface the patterns vendors won't publish themselves. Below: the recurring strengths, the hidden costs people mention most, and the cohort that consistently regrets adopting this tool.
ResearchedDiscussed by users across 6 sources (Hacker News, YouTube, Bluesky, Stack Overflow, GitHub, Lemmy) · researched Nov 8, 2026.
Weighted by the 80 posts each of 6 sources contributed.
- +12KB minified+gzipped bundle with zero third-party dependencies is genuinely light
- +Works across Svelte, Vue, React, Angular, Elixir, and vanilla JS without framework lock-in
- +One-instance, many-configurations API keeps the mental model small
- +Hardware-accelerated drag and snap behave like native iOS sheets
- +Large gallery of prebuilt demos (AI chatbot, PiP, Starbucks, Apple Clips) speeds setup
- −Docs are sparse and don't cover many configurations clearly
- −Angular hot-reload bug (open since Sep 2025) breaks pane content in dev
- −Vue 3 fitHeight content-change sizing still buggy since Jan 2024
- −No built-in fixed-footer option after 11 comments of requests
- −Feature work now hostage to Open Collective funding
- • Engineering time to work around open bugs (Angular hot reload, Vue fitHeight)
- • Possible paid sponsorship if you need features prioritised
- • Time spent reading source because docs are incomplete
How we verified this
Every listed fact about Panes — pricing, features, links, status — is re-read from the vendor's own pages by our verification pipeline and each change is logged with a date; the last pass ran on 7 Nov 2026. Analysis is drafted with AI models and checked against our editorial standards before publishing; see how we verify.
Verification history
We have re-verified Panes 10 times since . Each pass re-reads the vendor's own pages and re-checks every listed field against that evidence; passes where nothing had changed are marked as such.
- — changed use cases, description, features, limitations, switching in, switching out, who should skip it, pricing tiers, pricing fit, setup time, summary, who it suits, our verdict
- — changed SSL certificate
- — changed limitations
- — changed domain expiry
- — changed setup time, who should skip it, pricing fit, switching in, switching out
- — changed SSL certificate
Showing the 6 most recent of 10 verification passes.
Free to cite with attribution — this page re-verifies continuously.
How much does Panes cost in 2026?
Panes: Free to use. Pricing last verified 7 Nov 2026.
Plans compared
Every published Panes tier, its price as the vendor publishes it, who it fits, and what it adds over the tier below. The 12-month cost projection follows.
| Plan | Price | Billing | Who it's for |
|---|---|---|---|
| Free (Open Source) | Free | — | Any developer or team that wants Cupertino-style modals, cards, and panes without paying a licence fee and can work within a 12KB dependency-free bundle.Adds: Starting tier and only tier: the full library at $0, covering sheet, bulletin, and inversed modal panes, all modules, and the plugin system, funded through Open Collective sponsorship. |
12-month cost
Project the real annual outlay, including the implied monthly cost when only an annual tier is published.
Vendor list price only. Add-on usage, seat overages, and contract minimums are surfaced under Hidden costs & gotchas.
Where the pricing makes sense
The company stage and team size where Panes's pricing actually pencils out — and where peers do it cheaper.
Panes is a free, open-source library with no licence fee, sponsored through Open Collective. On cost alone it sits below paid component and modal libraries that charge per seat or per project — but you are trading that licence fee for sponsorship-funded maintenance rather than a vendor roadmap and support contract.
Has Panes' pricing changed?
No plan price for Panes has moved since we began logging in Aug 2026; the pricing page is re-read on every verification pass.
Who should pick Panes?
Pick Panes if you are Front-end developers building cross-framework UI, Teams with a strict bundle-size or zero-dependency budget, Mobile, web, and hybrid PWA builders, Prototypers and indie hackers.
Look elsewhere if you are Teams that need a vendor support contract or SLA, Teams wanting a large prebuilt theme or design-system library, Projects needing framework-native primitives such as React Portals.
Skip it if Skip Panes if you need broad accessibility primitives, framework-native portaling, or a vendor-backed component library with an SLA rather than a 12KB dependency-free Cupertino pane layer.
GeneratedReal-world workflow fit
Concrete scenarios for the personas Panes actually fits — and what changes day-one when you adopt it.
A team needs an iPhone-style bottom sheet for a checkout flow and refuses to add a large dependency. They install Panes, copy the Overflow Top or Apple Clips demo configuration, and wire the sheet to their own state.
Outcome: A hardware-accelerated Cupertino sheet ships without a component-library dependency, and the 12KB minified and gzipped bundle keeps first-load cost flat.
An app has jQuery-based modals that break on mobile. The developer replaces them with a single CupertinoPane instance, using breakpoints, events, and CSS variables for theming, and adds the backdrop drag-opacity demo for dismissal behavior.
Outcome: One library instance replaces the old modal code, and the same configuration carries over if the team later moves parts of the app to React or Angular.
A developer needs a convincing chat surface for a demo in an afternoon. They start from the AI Chatbot Modal demo, use the modular plugin system to add their own send/receive handling, and connect it to whatever backend they already have.
Outcome: A working, Cupertino-styled chat modal is demoable the same day, with no framework coupling and no dependency tree to explain.
Use cases
- Drop a Cupertino bottom sheet into a Svelte or Vue page and keep the same component across frameworks.
- Build a bulletin notification pane for an Angular storefront without pulling in a component library.
- Prototype iPhone-style floating panels in a React app with zero dependencies and a 12KB bundle.
- Create draggable, snap-to-breakpoint modals for a hybrid PWA on iOS WebView and Android WebView.
- Replace a heavier modal layer with a 12KB hardware-accelerated alternative on a performance-sensitive page.
- Add a picture-in-picture or z-stack pane to a media or dashboard interface.
- Ship an AI chatbot modal front end with a ready-made demo layout.
Setup time & first value
How long it actually takes to get something useful out of Panes — broken out by persona, not the marketing-page minute.
If you already have a front-end project running, expect a few minutes to install and instantiate a first pane, and closer to an afternoon to land a production sheet by adapting one of the demo layouts (AI Chatbot Modal, Starbucks, Z-stack, or 3D Push) and wiring your own events and CSS variables.
Switching to or from Panes
How to bring data in from common predecessors and how to get it back out — written for the switcher, not the buyer.
- →From a jQuery modal plugin: replace the modal calls with a single CupertinoPane instance and move dismissal behavior to the backdrop and prevent-dismiss settings.
- →From a framework-specific modal library: keep your component structure and swap the modal internals for a CupertinoPane, since Panes works in Svelte, Vue, React, Angular, Elixir, or vanilla JS.
- ↗To Radix or Headless UI: move to their accessible primitives and rebuild the Cupertino drag and snap behavior yourself.
- ↗To Vaul or another sheet library: re-implement your pane configurations against their API, since the CupertinoPane instance API is Panes-specific.
Resources & guides
Tutorials & Learning
YouTube returned 6 videos for “Panes”, and we withheld 6: 6 could not be judged, because “Panes” is a single word that other videos use for other things. We are showing none, because we could not prove any of them are about Panes.
Official links
What are the best Panes alternatives?
The closest alternatives to Panes we list are Ui Ux Pro Max Skill, OpenSpec and lablab.ai. Ranked by direct product-type match, not category overlap.
| Alternative | Pricing | Starts at | Last verified |
|---|---|---|---|
| Ui Ux Pro Max Skill | Free | Free | — |
| OpenSpec | Free | Free | — |
| lablab.ai | Free | Free | — |
Alternatives to Panes
View all
Ui Ux Pro Max Skill
Free open-source design-intelligence skill that feeds UI styles, palettes, fonts, and chart rules into Claude Code, Cursor, and other AI coding assistants.
Tools that pair well with Panes
Common stack mates teams adopt alongside Panes, with the specific reason each pairing earns its keep.
Ui Ux Pro Max Skill
Free open-source design-intelligence skill that feeds UI styles, palettes, fonts, and chart rules into Claude Code, Cursor, and other AI coding assistants.
OpenSpec
OpenSpec is a spec-driven development framework that keeps AI coding agents building the right thing — and proves it.
lablab.ai
Free AI hackathons where you build a working prototype on a named sponsor's AI stack in days or weeks.
Panes vs its closest rival
Panes's closest head-to-head is with Bito.
Our Panes vs Bito verdict written Jul 3, 2026 is more than 90 days old, so it is being re-reviewed against current data and is not shown.
Head-to-head comparisons
Frequently asked questions
For makers of Panes
- Get a Verified Listing for Panes ($39): a written decision within 1 working day.
- Free listing for another tool: Free reviews are decided in order, within 3 weeks of the review starting.
Used Panes? Help shape our editorial sentiment research.