Shadcn Feature Block One

Feature Block One is the most compact product-proof feature section in the Quartz set. It does not open with a heading group or a long grid of benefits. Instead, it puts two capabilities inside one shared rounded frame: analytics on the left, invoicing on the right.

That makes the block feel more like a product module than a marketing checklist. The cards are divided by the frame itself, so the reader sees two related product surfaces without the section needing extra labels, icons, or CTA noise.

The two-panel frame

The outer wrapper uses @container, @4xl:grid-cols-2, @max-4xl:divide-y, and @4xl:divide-x. On small containers the panels stack with a horizontal divider. Once the section has room, the same frame becomes two columns with a vertical divider.

Both panels use row-span-2 and grid-rows-subgrid, which keeps the copy and illustration rhythm aligned. The result is simple, but not flat: text sits at the top, proof sits at the bottom, and the shared rounded-2xl card makes the pair read as one designed unit.

Analytics panel

The analytics side is powered by ChartIllustration. It is not just a decorative SVG. The illustration uses @tailark/core/ui/chart, Recharts, an active tooltip, and two stacked area series for mobile and desktop.

The chart uses emerald and indigo theme colors with soft vertical gradients. Because the chart fills a h-72 container and sits flush near the bottom of the panel, it gives the section real visual weight without requiring a full dashboard screenshot.

Use this side for metrics, usage trends, forecasting, reporting, or any feature where the product claim is stronger when the visitor can see movement over time.

Invoicing panel

The invoicing side is more object-like. InvoiceIllustration builds a layered invoice card with a Tailark logo mark, an invoice number, a large $284,342.57 amount, a Due in 15 days label, and a small document illustration.

The source adds depth with pseudo-element backplates, mask-b-from-65%, a bg-illustration surface, ring-border-illustration, and a heavier shadow-xl. That gives the second panel a tactile finance-product feel while still matching the muted frame around the whole section.

This side works best for billing, payments, documents, approvals, subscriptions, or any workflow where a single polished object communicates the feature faster than a paragraph.

When to use this variant

Use Feature Block One when you need to explain two strong capabilities as peers. It is especially good for SaaS products where analytics and operations sit side by side: finance tools, reporting platforms, billing systems, admin dashboards, and B2B workflow products.

Avoid using it for a long list of small benefits. The design wants two substantial ideas. If you add a third or fourth feature, the quiet strength of the shared frame disappears.

What to customize first

• Replace the two headings with outcome-driven claims, not feature labels.
• Keep each paragraph short enough to sit above its visual without crowding the card.
• Swap the chart data, labels, and colors if analytics is not your first proof point.
• Replace the invoice amount, document motif, or full illustration if your product is not finance-adjacent.
• Check the stacked layout and two-column layout after editing copy, because the divider behavior changes at @4xl.

Implementation notes

• The section is theme-aware through bg-background, bg-card/50, ring-border, text-muted-foreground, and illustration-specific tokens.
• The chart illustration is a client component because Recharts and the active tooltip need client-side rendering.
• The invoice illustration is marked aria-hidden, so the surrounding feature copy still carries the accessible meaning.
• The source uses a single shared frame instead of individual Card components, which is why the variant feels more integrated than a standard two-card grid.

Related Shadcn UI blocks

• Features Blocks
• Bento Blocks

Start from Tailark

Preview Shadcn Feature Block One