# Arquipélago A row of tabs stuck together like liquid, where the chosen tab breaks away like a droplet. > Arquipélago is a THM Componentes component that turns a row of tabs into a single liquid-looking piece: when you click a tab, it moves away from its neighbors and breaks off like a droplet while the rest stays fused. The effect comes from an SVG filter and a CSS transition, and it makes section navigation feel distinctive. - Category: Navigation and scroll - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/arquipelago/ ## What it looks like Think of drops of mercury touching on a table. The tabs sit side by side in the theme primary color, and a blur-and-contrast filter melts their edges together, so the row looks like one piece with rounded corners. When you pick a tab, it gains a 20-pixel margin on each side over half a second, and the liquid stretches until the drop pinches off from its neighbors; the previous tab merges back into the group. The labels stay crisp on top of the effect. How round the shapes look depends on the blur strength, which a prop controls. ## You may be looking for this if you asked for something like - “tabs that stick together and split apart like liquid” - “a tab menu with a droplet effect when I click” - “a section switcher that is not the usual one, kind of gooey” - “buttons side by side that merge into one shape and the selected one pops out” - “gooey tabs for the top of my portfolio” - “category navigation with a liquid animation” ## Also known as droplet tabs, gooey tabs, liquid tabs, gooey effect, metaball tabs, liquid tab switcher ## When to use - Switching categories in a showcase, portfolio or menu - A section selector on product landing pages with a strong identity - Toggling between plans, periods or view modes - Navigation for agency, studio or young brand sites ## When to avoid - Many tabs or long labels, which make the row too wide on phones - Sober interfaces, such as finance dashboards, where the effect draws too much attention ## How to ask your AI ```text Create gooey tabs to switch my portfolio categories: buttons fused like liquid where the active tab separates from its neighbors like a droplet, in my brand colors, with accessible tab roles, arrow key navigation and an instant switch for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Arquipélago ### Does Arquipélago work with the keyboard and screen readers? Partly. Each tab in Arquipélago is a native button, so it takes focus with Tab and activates with Enter or Space. Tab roles and the selected state are not marked, and the highlight is only visual. Ask your AI to add role tab, aria-selected and arrow key navigation. ### Can I change the colors and roundness of Arquipélago? Yes. Arquipélago uses the theme primary and background colors, so it follows your project tokens and switches with light and dark mode when your theme defines them. Roundness comes from the blurStdDeviation prop, 6 by default, where higher values give softer shapes; the margin prop sets how far the active tab moves away. ### Does Arquipélago work on phones? Yes. The tabs in Arquipélago are regular buttons, so a tap works like a click, and the effect comes from an SVG filter the browser applies. On narrow screens, keep few tabs with short labels and test on simpler devices, since SVG blur filters can be demanding during the transition. ## Related components - [Fichário](https://vibecode.thmtecnologia.com/en/components/fichario/): Tabs where a rounded highlight slides to the chosen option, with the content in a stack of cards. - [Bonde](https://vibecode.thmtecnologia.com/en/components/bonde/): A header menu where a single panel slides and resizes as you move from one item to the next. - [Parafina](https://vibecode.thmtecnologia.com/en/components/parafina/): Words take turns in the headline, melting into one another like merging drops before turning crisp again. - [Atol](https://vibecode.thmtecnologia.com/en/components/atol/): A black pill at the top of the screen that grows and reshapes to show music, a call, an alert or a timer. - [Passarela](https://vibecode.thmtecnologia.com/en/components/passarela/): A translucent icon bar where each icon grows as the mouse gets closer, like on a Mac. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).