Vine
Screen library

Complete screens.
Grouped to explore.

Full application patterns assembled from vine-ds primitives — authentication and application shells first, then dashboards, record lists, settings, and the system states that keep it all honest. Every preview renders live in its own frame with desktop, tablet, and mobile sizing.

Available
81
Groups
14
Sizes
03

Pattern groups

Browse by group

Each group opens its live previews, with a size control on every screen.

019 available

Authentication

9 screensOpen
025 available

Onboarding & activation

5 screensOpen
036 available

Application shells

6 screensOpen
046 available

Dashboards & overviews

6 screensOpen
056 available

Data tables & record lists

6 screensOpen
065 available

Object detail pages

5 screensOpen
075 available

Forms & data entry

5 screensOpen
085 available

Search, filtering & command

5 screensOpen
097 available

AI & agentic

7 screensOpen
105 available

Messaging & activity

5 screensOpen
115 available

Calendar & scheduling

5 screensOpen
125 available

Pricing & conversion

5 screensOpen
136 available

Settings & preferences

6 screensOpen
146 available

System & edge states

6 screensOpen

14 groups with live routes

Every screen in the gallery is a real route rendered in an isolated frame. Each preview has its own size control — or open the route in a dedicated tab.

Authentication · 2 screens

Sign-in, registration, code verification, and account recovery flows built on the pill control language.

View the group
01

A split-screen sign-in: a still picture plate on one side, password entry, social providers, and SSO on the other.

02

The sign-in twin: the same split-screen frame with name, work email, live password strength, and a terms gate.

Onboarding & activation · 2 screens

Welcome, workspace setup, teammate invites, and the checklists that carry a new account from empty to its first real result.

View the group
01

Two questions the product actually branches on, with the second one appearing only once the first is answered.

02

Name, address, region, and defaults in one pass — pre-filled, with the URL following the name until you touch it.

Application shells · 2 screens

Complete application frames — sidebar, header-first, and mobile — that carry the chrome so content pages stay focused.

View the group
01

A collapsible sidebar with sectioned navigation, a workspace switcher, and a scrollable content column.

02

Top navigation with a global search pill, command palette hint, and account controls over dashboard content.

Dashboards & overviews · 2 screens

Data-forward overview screens that put the weight-first KPI grid and token-driven charts to work for analytics, operations, and first-run moments.

View the group
01

A range-switched reporting dashboard: KPI tickets, a dual-series trend chart, and a top-pages breakdown table.

02

Service health tiles, capacity meters, and a severity-ranked incident feed for run-the-business monitoring.

Data tables & record lists · 2 screens

Searchable, filterable, and selectable record collections — list, master–detail, board, grouped, virtualized, and card views that keep dense data readable.

View the group
01

Faceted pill filters, a selectable table, and a bulk-action bar over a searchable record collection.

02

A searchable list beside a detail panel; selecting a row trades panels without navigating away.

Object detail pages · 2 screens

The single record seen head-on — identity, status, history, and the related things hanging off it.

View the group
01

An entity header with status and owner over a two-column body: facts on the left, a metadata rail on the right.

02

One object split across overview, activity, files, and settings, with the URL carrying the open tab.

Forms & data entry · 2 screens

Create and edit paths — the long form, the multi-step wizard, and the validation moments where a system usually breaks.

View the group
01

Grouped sections down one column, a key that writes itself from the name, and an action bar that sticks to the bottom of the scroll.

02

Four steps on a rail that never leaves, state that survives every step back, and a review page with an edit route per answer.

Search, filtering & command · 2 screens

Ways in — global results, faceted narrowing, saved views, and the palette that skips navigation entirely.

View the group
01

Four object types grouped so they never interleave, arrow-key traversal across group boundaries, and the matched line shown rather than a description.

02

A palette over a dimmed shell where commands needing one more answer open a second step, the command held as a chip that scopes what you type next.

AI & agentic · 2 screens

Streaming answers, agent runs, approvals, and the failure modes that only appear once a model is doing the work.

View the group
01

Tokens arriving into a settling layout, with stop, regenerate, and a partial answer that stays readable.

02

Steps expanding as they execute — tool calls, inputs, results, nested subtasks — while the run is still going.

Messaging & activity · 2 screens

Threads, comments, and notifications — the surfaces where other people show up inside the product.

View the group
01

A list beside a reading pane, unread carried by weight rather than colour, and a composer pinned so the reply box never moves.

02

One level of nesting, mentions as chips, reactions that name who reacted, an edit history shown rather than implied, and resolve that folds without deleting.

Calendar & scheduling · 2 screens

Time as a layout problem — month grids, week columns, booking flows, and plans that run longer than a screen.

View the group
01

Two events a day then a count that opens the rest, multi-day bars split cleanly at the week boundary, and a today marker that survives navigation.

02

Overlapping events split into columns instead of stacking, a current-time line on today's column only, and a hover that shows where a drag would create.

Pricing & conversion · 2 screens

Plan comparison, paywalls, and checkout — the screens that ask for money rather than report on it.

View the group
01

Three plans as cards for the half-decided and a full feature grid for whoever has to justify it, with a term switch that rewrites both figures.

02

The ceiling stated as a fact over the work it stopped, the price shown monthly and prorated, and a real button for not paying.

Settings & preferences · 2 screens

Account, notification, credential, and appearance configuration built on tall pill controls and switch matrices.

View the group
01

A channel-by-event switch matrix with digest frequency and quiet hours.

02

Create-once credential reveal, masked key lists, and a careful revoke path.

System & edge states · 2 screens

Empty, missing, unavailable, and failing moments — quiet surfaces that keep the weight-led hierarchy calm under pressure.

View the group
01

A factual first-run empty state with one earned primary action and setup hints.

02

An in-shell missing-page state with search and suggested destinations.