Skip to content
aparté

App Shell

Width Open in a tab
The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.
The markup
<div class="aparte-app-shell" style="height: 24rem">
  <aside class="aparte-sidebar">
    <div class="aparte-sidebar__header">
      <span class="aparte-sidebar__brand">aparté</span>
      <button class="aparte-btn aparte-btn--icon aparte-btn--sm" type="button" aria-label="New chat"><aparte-icon name="edit"></aparte-icon></button>
    </div>
    <div class="aparte-sidebar__search aparte-field-group">
      <input class="aparte-field aparte-field--sm" type="search" placeholder="Search">
    </div>
    <div class="aparte-sidebar__body">
      <div class="aparte-conv-group" role="group" aria-label="Today">
        <div class="aparte-menu__label aparte-conv-group__label" aria-hidden="true">Today</div>
        <div class="aparte-menu__item aparte-conv-item aparte-conv-item--active"><button class="aparte-conv-item__select" type="button"><span class="aparte-conv-item__title">Deploy checklist</span></button></div>
        <div class="aparte-menu__item aparte-conv-item"><button class="aparte-conv-item__select" type="button"><span class="aparte-conv-item__title">Rename the staging bucket</span></button></div>
      </div>
      <div class="aparte-conv-group" role="group" aria-label="Yesterday">
        <div class="aparte-menu__label aparte-conv-group__label" aria-hidden="true">Yesterday</div>
        <div class="aparte-menu__item aparte-conv-item"><button class="aparte-conv-item__select" type="button"><span class="aparte-conv-item__title">Why is total a float?</span></button></div>
      </div>
    </div>
    <div class="aparte-sidebar__footer"><span class="aparte-avatar aparte-avatar--sm">P</span> Paul</div>
  </aside>
  <header class="aparte-app-header">
    <span class="aparte-app-header__title">Deploy checklist</span>
    <div class="aparte-app-header__actions"><span class="aparte-tag">gpt-4.1</span></div>
  </header>
  <main class="aparte-app-shell__main">
    <aparte-chat>
      <aparte-chat-viewport>
        <aparte-chat-bubble message-id="u1" data-role="user" content="Walk me through the deploy."></aparte-chat-bubble>
        <aparte-chat-bubble message-id="a1" data-role="assistant" name="Assistant" content="Build, run the gate, tag, then push the tag — the workflow publishes from it."></aparte-chat-bubble>
      </aparte-chat-viewport>
      <aparte-composer>
        <div class="aparte-composer-shell">
          <div class="aparte-composer-row">
            <aparte-composer-input></aparte-composer-input>
            <aparte-composer-send></aparte-composer-send>
          </div>
        </div>
      </aparte-composer>
    </aparte-chat>
  </main>
</div>

Sidebar beside, header above, the chat in the rest.

A recipe: two columns and two rows, the sidebar spanning both rows, the header and the main area stacked in the second column. The chat fills __main, which is what gives it the height it needs to scroll (see the layout guide). Size the shell — height: 100dvh for a page — and everything inside follows. Under 48rem the sidebar leaves the grid to become a drawer, and the header’s toggle appears.

Classes

Section titled “Classes”

.aparte-app-header · .aparte-app-shell · .aparte-app-shell__main · .aparte-sidebar · .aparte-split

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.