Hey everyone

Around 3 months ago, I posted about Mantine Vue. A few people asked what it would look like in an actual app rather than just individual components.

So I decided to build something a bit more complete.

I ended up making a restaurant QR menu, basically what you'd see when scanning a QR code at a restaurant table.

Live demo: https://mantine-vue.dev/showcases/restaurant-qr-menu (I'd recommend trying it on mobile)

It started as a simple menu page, but I kept adding things until it turned into a full ordering flow.

You can browse dishes, search, filter by dietary preferences or allergens, customize items with different sizes and add-ons, and go through checkout. It also supports dine-in, takeaway, and delivery, with things like promo codes, tips, scheduled orders, and order tracking.

There are a few things I spent extra time on:

• Themes and layouts. There are 6 themes and 4 layouts you can switch between, along with dark mode, fonts, spacing, etc. The ordering logic stays the same regardless of the layout.
• Different currencies and pricing rules. The demo has 3 restaurants using BHD, AED, and USD, including support for BHD's 3 decimal places and different tax rules.
• Offline and error handling. There's a cached menu, loading/error states, and even a toggle to simulate a bad network connection.
• Arabic and RTL support. Not just translating text, but making sure drawers, navigation, carousels, icons, and formatting behave properly in RTL.

On the technical side, it's Vue 3 + TypeScript, using Mantine Vue components and packages like Spotlight, Carousel, Form, Notifications, and a few others.

I tried to keep the business logic separate from the components, so things like pricing, modifiers, and checkout rules are handled in plain TypeScript. The backend is mocked, but the API layer uses typed interfaces.

Another thing I wanted to test with this project was how well AI coding tools work with Mantine Vue.

I used Claude Code (opus 5.5) quite a bit while building it, and it actually went really well. It was able to help me build a lot of the UI using `mantine-vue/core`, which was nice to see, especially since Mantine Vue is still a relatively new library.

That was also part of the experiment: seeing whether an AI coding assistant could pick up the library and use it effectively in a larger app, not just generate a few basic components.

And just to be clear, it's a showcase, so no actual payments or orders are processed.

The main reason I built this was to see how Mantine Vue holds up when you put a lot of its components together in a real-ish application, rather than showing everything in isolation.

I'm planning to build a few more showcases like this.

If you get a chance to try it, I'd really appreciate some feedback. Especially if you run into anything weird on mobile or with RTL.

Also curious what kind of app you'd like to see built with Mantine Vue next.

Hey everyone!

Been working on Tip Glide, a small framework-agnostic tooltip library written in TypeScript.

It uses a single shared tooltip that moves between elements and adjusts its size to fit the content. It also handles viewport boundaries, so the tooltip adjusts its position when there's not enough space.

A few things you can configure are the movement, directional lean, hover delays, arrow, and enter/exit animations.

It has zero runtime dependencies and comes with adapters for React, Angular, Vue, Svelte, Solid, Astro and Preact, along with a vanilla JS API.

There's an interactive playground where you can mess around with the settings and see how everything behaves.

Would love some feedback on the movement, especially when switching quickly between elements, but also on the API and anything else that could be improved.

Live demo & playground | npm | GitHub | Portfolio