Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Juntar componente

Última atualização:

Junção CSS Tailwind somente CSS para agrupar botões, entradas ou seleções em uma unidade conectada. Horizontais e verticais. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Unir componentes agrupa itens adjacentes removendo o espaçamento e mesclando as bordas entre os elementos. O sistema de junção Frutjam cria grupos de botões coesos, controles segmentados e combinações de entrada. Suporta múltiplas direções e funciona perfeitamente com botões, entradas e elementos selecionados para layouts de formulários profissionais e grupos de controle.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
joinBaseAgrupa elementos filhos mesclando suas bordas
join-itemModificadorElemento filho que participa do grupo de junção
join-horizontalModificadorLayout horizontal (padrão)
join-verticalModificadorLayout empilhado verticalmente

Uso Básico

1
2
3
4
5
<div class="join">
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
</div>

1
2
3
4
5
<div className="join">
    <button className="join-item btn btn-outline">Button</button>
    <button className="join-item btn btn-outline">Button</button>
    <button className="join-item btn btn-outline">Button</button>
</div>

Junte-se às direções

Controle a orientação do layout de itens agrupados usando classes de utilitários direcionais.

Junção horizontal

O layout padrão para controles lado a lado e grupos de botões.

html 
1
2
3
4
5
<div class="join join-horizontal">
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
</div>

Junção Vertical

Empilha junta itens verticalmente, ideal para barras laterais ou navegação específica para dispositivos móveis.

html 
1
2
3
4
5
<div class="join join-vertical">
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
</div>

Associação responsiva

Mude automaticamente de uma pilha vertical no celular para uma linha horizontal no desktop usando .join-vertical e .lg:join-horizontal.

html 
1
2
3
4
5
<div class="join join-vertical lg:join-horizontal">
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
</div>

Entradas agrupadas

Combine perfeitamente entradas de texto com botões ou ícones para criar barras de pesquisa e formulários de inscrição profissionais.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="join">
    <input class="input input-xs join-item" placeholder="Email" />
    <button class="btn btn-xs join-item">Subscribe</button>
</div>
<div class="join">
    <button class="btn btn-xs join-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
    </button>
    <input type="search" class="input input-xs join-item" placeholder="Search...">
</div>

Grupos de botões de opção

Transforme entradas de rádio padrão em um controle segmentado ou alterne o grupo agrupando-as em um contêiner Join com classes de botão.

html 
1
2
3
4
5
<div class="join">
  <input class="join-item btn btn-outline" type="radio" name="options" aria-label="Radio 1" />
  <input class="join-item btn btn-outline" type="radio" name="options" checked aria-label="Radio 2" />
  <input class="join-item btn btn-outline" type="radio" name="options" aria-label="Radio 3" />
</div>

Cartões agrupados

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="join">
<div class="join-item card shadow w-88">
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p>
      The Card component is a versatile container for combining related information, such as images, titles, and actions, into a single, visually appealing unit.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-primary btn-sm">Buy Now</button>
    </div>
  </div>
</div>
<div class="join-item card shadow w-88">
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p>
      The Card component is a versatile container for combining related information, such as images, titles, and actions, into a single, visually appealing unit.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-primary btn-sm">Buy Now</button>
    </div>
  </div>
</div>
</div>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Juntar e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP