Honeycomb

Blocks

Page-level building blocks installed from the shadcn registry. Each block runs in its own isolated route and is embedded below with a desktop / tablet / mobile breakpoint toolbar.

Dashboards

Full application dashboards with sidebars, charts, and tables.

2 blocks

Dashboard 01

Section cards, an interactive area chart, and a sortable data table inside an inset sidebar.

dashboard-01

CRM Dashboard 01

Full CRM dashboard with sidebar, charts, and table.

obra-crm-dashboard-01

Login

Sign-in screens — simple cards, two-column splits, social auth, and marketing variants.

5 blocks

Login 01

Simple email + password card.

login-01

Login 02

Login card with image side panel.

login-02

Login 03

Centered card login with social buttons and field group.

login-03

Login 04

Two-column login with marketing copy.

login-04

Login 05

Login with logo header and footer links.

login-05

Signup

Sign-up screens — single-column cards, side-image layouts, and multi-step variants.

5 blocks

Signup 01

Two-column signup with marketing copy and social buttons.

signup-01

Signup 02

Centered signup card with field group and policy footer.

signup-02

Signup 03

Signup with side image and full-bleed branding panel.

signup-03

Signup 04

Minimal signup card with email + password and OAuth options.

signup-04

Signup 05

Multi-step signup with progress indicator.

signup-05

Sidebars

Sixteen sidebar layouts — collapsible, inset, floating, with team switchers and search.

17 blocks

Sidebar 01

A simple sidebar with navigation grouped by section.

sidebar-01

Sidebar 02

A sidebar with a collapsible section.

sidebar-02

Sidebar 03

A sidebar with submenus.

sidebar-03

Sidebar 04

A floating sidebar with submenus.

sidebar-04

Sidebar 05

A sidebar with collapsible submenus.

sidebar-05

Sidebar 06

A sidebar with a sticky site header.

sidebar-06

Sidebar 07

A sidebar that collapses to icons.

sidebar-07

Sidebar 08

An inset sidebar with secondary navigation.

sidebar-08

Sidebar 09

A sidebar with collapsible icon groups.

sidebar-09

Sidebar 10

A sidebar with a search bar.

sidebar-10

Sidebar 11

A sidebar with a team switcher.

sidebar-11

Sidebar 12

A sidebar with a calendar.

sidebar-12

Sidebar 13

A sidebar in a dialog.

sidebar-13

Sidebar 14

A sidebar with a sticky footer.

sidebar-14

Sidebar 15

A right-aligned sidebar.

sidebar-15

Sidebar 16

A sidebar with controlled state.

sidebar-16

App Sidebar 01 (Honeycomb)

Data-driven Honeycomb app sidebar — section caption, nav items with optional icon and count/currency badge plus nested anchor children, and an optional footer slot. Router-agnostic via renderLink.

honeycomb-sidebar-01

Marketing

Heroes, feature sections, pricing tables, testimonials, CTAs, and FAQ blocks for marketing pages.

42 blocks

Hero Carousel 01 (Honeycomb)

Headline + CTA with auto-advancing 3D rotating stack of business case cards.

honeycomb-hero-carousel-01

Hero 02

Two-column hero with split image and CTA pair.

obra-hero-02

Hero 03

Hero variant with feature emphasis.

obra-hero-03

Hero 04

Hero variant with stacked layout.

obra-hero-04

Hero 05

Hero variant for dense landing copy.

obra-hero-05

Header 01 (Honeycomb)

Sticky white header with scroll-revealed Get Pre-Approved CTA.

honeycomb-header-01

Primary Nav 01

Primary navigation header.

obra-primary-nav-01

Secondary Navigation 02

Secondary nav alt layout.

obra-secondary-navigation-02

Navs Combined 01

Primary + secondary nav stacked.

obra-navs-combined-01

Navs 01 (Honeycomb)

Honeycomb variant of Navs Combined 01 — white background, Honeycomb logo, secondary nav in stone-6 regular weight, and an optional announcement banner slot (e.g. "Pizza Place is at 90% of their $50,000 Raise").

honeycomb-navs-01

How It Works 01 (Honeycomb)

Three-step Build / Engage / Repay flow with colored icon tiles and a rotating use-case headline.

honeycomb-how-it-works-01

Value Pillars 01 (Honeycomb)

Values/positioning grid — colored icon tiles, headlines, and CTA links in a responsive four-up layout.

honeycomb-value-pillars-01

Features 04

Feature showcase variant.

obra-features-04

Features 05

Feature showcase variant.

obra-features-05

FAQ 02

FAQ variant layout.

obra-faq-02

CTA Animated 01 (Honeycomb)

Cream CTA card with purple animated button and trust badges.

honeycomb-cta-animated-01

CTA 01

Call-to-action band.

obra-cta-01

CTA 01b

CTA 01 alternate variant.

obra-cta-01b

CTA 02

CTA variant.

obra-cta-02

CTA 05

CTA variant.

obra-cta-05

Compare 01 (Honeycomb)

Three-column funding comparison (SBA / Honeycomb / MCA) with a highlighted cream-card middle plan and a yellow CTA.

honeycomb-compare-01

Comparison 01

Feature comparison table.

obra-comparison-01

Testimonial Case 01 (Honeycomb)

Two-column testimonial with purple pull-quote and CaseCard sidebar.

honeycomb-testimonial-case-01

Logo Section 01

Customer/partner logo row.

obra-logo-section-01

Logo Section 02

Logo section alt layout.

obra-logo-section-02

Ratings 01

Star ratings and review summaries.

obra-ratings-01

Quote 01

Single featured customer quote.

obra-quote-01

Quotes 01

Multiple-quote testimonial grid.

obra-quotes-01

Quotes 02

Quotes alternate layout.

obra-quotes-02

Global Banner 01

Site-wide announcement banner.

obra-global-banner-01

Cookie Banner 01

Cookie consent banner.

obra-cookie-banner-01

Cookie Banner 02

Cookie consent banner variant.

obra-cookie-banner-02

Footer 01 (Honeycomb)

Minimal wordmark-and-links footer.

honeycomb-footer-01

Doormat 01

Wide multi-column sitemap footer.

obra-doormat-01

Footer 01

Compact site footer.

obra-footer-01

Marquee Photos 01 (Honeycomb)

Continuous horizontal scroll of funded-business photo cards.

honeycomb-marquee-photos-01

404 01

404 not-found page.

obra-404-01

Blog Detail 01

Long-form blog post layout.

obra-blog-detail-01

How to Use 01

Step-by-step usage guide section.

obra-how-to-use-01

Newsletter 01

Newsletter signup band.

obra-newsletter-01

Stats 01

Key-metric stats strip.

obra-stats-01

Team 01

Team member grid.

obra-team-01

Application

In-app surfaces — data tables, wizards, and dialogs that compose into product UIs.

6 blocks

CRM Wizard 01

Multi-step setup wizard for a CRM workflow.

obra-crm-wizard-01

Table 01

Sortable, paginated data table.

obra-table-01

Add Contact Dialog 01

Modal contact form.

obra-add-contact-dialog-01

Campaign Card (Honeycomb)

Investment offering card — photo callouts, save toggle, overlapping avatar + returning-business pill, milestone funding bar, stat row, and overflow-collapsing tags.

honeycomb-campaign-card

Funding Bar (Honeycomb)

Milestone funding bar — continuous MIN → MAX → MORE fill, hexagon marker, state-aware label + tooltip, and terminal funded/closed states.

honeycomb-funding-bar

Scroll Carousel (Honeycomb)

Lightweight native-scroll row with position-aware arrow controls and edge fades. Ghost and primary (honey) arrow variants.

honeycomb-scroll-carousel