V Vaylan UI

Composed interfaces

Application patterns

Responsive structures assembled from Vaylan UI primitives. They define layout and accessibility without owning application data, routes, or permissions.

Page workspace

Combine a page header, exact operational statistics, and a compact collection toolbar.

Workspace

Projects

Manage active projects and their owners.

Active
18
Across four teams
Awaiting review
5
Needs a decision
Blocked
2
Needs attention
18 projects 
<.page_header title="Projects" eyebrow="Workspace">...</.page_header>
<.stat_summary label="Project summary">...</.stat_summary>
<.collection_toolbar result_label="18 projects">...</.collection_toolbar>

Application shell

A persistent large-screen sidebar becomes an accessible drawer on smaller screens.

Overview

A focused workspace inside the shared shell.

Recent activity

No new activity today.

Next review

Friday at 10:00.

<.app_shell id="app-drawer" brand="Northstar">
  <:brand_mark>N</:brand_mark>
  <:navigation><li><.link navigate={~p"/"}>Overview</.link></li></:navigation>
  <:account>Signed-in account</:account>
  <%= @inner_content %>
</.app_shell>

Authentication shell

A calm public brand panel and one focused authentication card.

N Northstar

Sign in

Continue to your workspace.

Need help signing in? 
<.auth_shell product_name="Northstar" title="Sign in">
  <:brand_mark>N</:brand_mark>
  <.input field={@form[:email]} label="Email" />
  <.button color={:primary}>Sign in</.button>
</.auth_shell>