Vertx Studio logoVERTX
Studio

Blocks

Composed sections built from primitives. Toggle any entry between live preview and the tokens it uses; full-bleed layouts open in a dialog, overlay blocks open their own dialog or palette.
AI5Cards5Chrome3Command Menu1Dialog12File Upload2Form Layout5Grid List2Login9Marketing8Onboarding1OG Preview2Sidebar4Stats15Table2
Filter by name or description…

AI

5

AI 01

Chat-style AI assistant surface with prompt input and response stream.

AI 02

AI conversation with suggested prompts and tool invocations.

AI 03

AI workspace with split message list and context sidebar.

AI 04

Compact AI prompt panel suited for embedded assistants.

AI 05

Full-height AI chat with attachments and model picker.

Cards

5

Features Grid 01

Tall feature tiles with mock visuals, tag bar, and arrow links.

Explore Grid 01

Catalog area tiles with gradient surfaces and a tag bar.

Release Grid 01

Legacy cover cards with text-link popover — superseded by Release Grid 02.

Release Grid 02

Cover cards with frosted in-card streaming sheet and brand icons — archived from Nikzad.Studio.

Featured Item 01

Compact cover + title catalog card — archived from Nikzad.Studio.

Chrome

3

Navbar 01

Top app navigation bar (brand + menus + Sign in pill + mobile trigger).

Footer 01

Simple legal footer (privacy/terms/contact).

Token Rail 01

Collapsible design-token sidebar with pin, hover-expand, and theme/profile controls.

Command Menu

1

Command Menu 01

Keyboard-driven command palette with grouped actions.

Dialog

12

Dialog 01

Standard dialog with title, description, and primary action.

Dialog 02

Confirmation dialog for destructive actions.

Dialog 03

Form dialog with validated fields and submit action.

Dialog 04

Multi-step dialog with progress header and navigation.

Dialog 05

Preview dialog for inspecting rich content inline.

Dialog 06

Dialog with side illustration and marketing copy.

Dialog 07

Sharing dialog with link, permissions, and recipients.

Dialog 08

Settings dialog with left-nav sections and save actions.

Dialog 09

Upgrade dialog highlighting plan features and pricing.

Dialog 10

Announcement dialog for new features and changelogs.

Dialog 11

Invite dialog with email input and role selector.

Dialog 12

Feedback dialog with rating and free-text comment.

File Upload

2

File Upload 01

Form with dropzone, file list, and muted action footer.

File Upload 02

Dropzone with per-file progress, completed queue, and muted action footer.

Form Layout

5

Form Layout 01

Single-column form with section headings.

Form Layout 02

Two-column form with label-above-input rows.

Form Layout 03

Settings-style form with left description, right controls.

Form Layout 04

Wizard form with stepper and section navigation.

Form Layout 05

Inline form with compact fields and trailing actions.

Grid List

2

Grid List 01

Card grid with image, title, and metadata rows.

Grid List 02

Product grid with price, badge, and hover actions.

Login

9

Login 01

Centered email + password sign-in card.

Login 02

Split-screen login with marketing illustration.

Login 03

Login with social providers and email fallback.

Login 04

Magic-link sign-in with single email field.

Login 05

Two-step login that collects email, then credentials.

Login 06

Minimal login with logo, tagline, and SSO buttons.

Login 07

Login card with testimonial panel on the side.

Login 08

Enterprise login with workspace slug and SSO.

Login 09

Full-bleed login with background imagery.

Marketing

8

Marketing Hero 01

Landing hero with headline, dual CTAs, and footnote.

Marketing Stack Band 01

Pill row of stack or feature labels between landing sections.

Marketing Quick Start 01

Code snippet card with primary and secondary CTAs.

Marketing FAQ 01

Accordion FAQ band with optional contact line.

Marketing Comparison Matrix 01

Feature comparison matrix with highlighted product column and checkmark rows.

Marketing Final CTA 01

Closing headline with dual CTAs.

Legal Document 01

Placeholder legal page with title and body copy.

Scroll Reveal 01

Marketing sections that reveal on scroll using CSS scroll-driven animations.

Onboarding

1

Onboarding 01

Welcome flow with stepper, hero copy, and primary CTA.

OG Preview

2

OG Preview 01

Dark Open Graph card with site badge, title, and description. Production share images are generated at /og.

OG Preview 02

Branded Open Graph card with background image, scrim, and text overlay.

Sidebar

4

Sidebar 01

Collapsible app shell with icon rail, footer toggle, and collapsible nav groups.

Sidebar 02

Collapsible sidebar with icon rail and team switcher.

Sidebar 04

Sidebar with search input and pinned favorites.

Sidebar 05

Sidebar with nested navigation and project tree.

Stats

15

Stats 01

KPI grid with labels, values, and delta indicators.

Stats 02

Stat cards with sparkline trend for each metric.

Stats 03

Horizontal stat bar with dividers and inline trends.

Stats 04

Comparison stat group contrasting two periods.

Stats 05

Stat cards with icon, title, value, and helper text.

Stats 06

Financial KPIs with currency formatting and deltas.

Stats 07

Stat grid with contextual tooltips per metric.

Stats 08

Stat cards with progress bars toward a target.

Stats 09

Stat row optimized for a dashboard header.

Stats 10

Stat cards paired with category chart thumbnails.

Stats 11

Minimal monochrome stat grid with large numerals.

Stats 12

Stat cards with segmented gauge indicators.

Stats 13

Stats split by dimension with toggleable filter chips.

Stats 14

Stat cards with leading icon badges in accent color.

Stats 15

Stat grid with period-over-period comparison tags.

Table

2

Table 01

Product inventory with category filter and row actions.

Table 02

Grouped project table with header filter, collapsible sections, assignee avatars, and status badges.

Filter by name or description…