beUI Pro

Feature Sections

10 variants

Ten premium feature blocks spanning animated showcases, synced lists, staged tabs, connected benefit stories, and distinct theme-aware bento systems for product storytelling.

Benefits triptych

features-benefits-triptych.tsx

An editorial three-part benefits section with aligned product copy over a continuous atmospheric field and animated interface stories for discovery, composition, and source ownership.

Built for momentum

From first section to finished page.

A premium component system for teams that want to move quickly without giving up ownership or polish.

01

Start with the right block

Explore polished heroes, pricing, features, and calls to action without rebuilding the foundation.

02

Compose a complete page

Combine sections that already share thoughtful responsive behavior, motion, and theme conventions.

03

Make every detail yours

Install real React source, then reshape the structure, styling, and interactions for your product.

Install

$ bunx --bun shadcn add @beui-pro/features-benefits-triptych

Signal grid

features-signal-grid.tsx

A precise three-by-two feature grid with fixed two-line headings, aligned corner extensions, and a bottom-origin pastel shader that grows inside each hovered card.

One connected system

Scattered context. One clear next step.

Bring knowledge, decisions, and execution into the same operating layer. Every signal stays visible from input to outcome.

Connected orchestration

Keep every step, handoff, and decision connected from request to outcome.

Context-aware execution

Bring the right knowledge into each task before the work begins.

Built-in guardrails

Apply clear boundaries exactly where sensitive actions need them.

Persistent memory

Carry useful context forward without making users repeat themselves.

Structured outputs

Turn every result into predictable data that other systems can use.

Human approval

Keep people in control when a decision needs review or confirmation.

Install

$ bunx --bun shadcn add @beui-pro/features-signal-grid

Control deck

features-control-deck.tsx

A structured agent-operations bento with an animated connection map, live knowledge sources, a resolution metric, product-grounding proof, and a compact contextual handoff row.

Agent operations

One system for everycustomer conversation.

Connect knowledge, automate the routine, and keep every handoff visible from one focused workspace.

Context that stays connected

Bring product knowledge, customer history, and live signals into every answer without rebuilding the workflow.

Sources connected

3 live knowledge streams

Automatic resolution

Last 30 days

+14.8%
68%
Handled by agent1,842 / 2,709
12k

Answers grounded in your product

Every response traces back to approved context, with the source ready whenever your team needs it.

Escalate with the full conversation attached

The right teammate gets context, intent, and a suggested next action.

Install

$ bunx --bun shadcn add @beui-pro/features-control-deck

Voice AI

features-voice-ai.tsx

An asymmetric voice-AI bento with an always-on service card, phone-call mock, transcript summary, and connected action flow, accented by a subtle edge dither.

AI voice, built for service

Every call answered. Every task moving.

Natural conversations, clear summaries, and actions that carry into the tools your team already uses.

24/7

Always ready to answer

One consistent voice across every hour, queue, and time zone.

Natural conversations

Fast turn-taking and expressive speech keep every call moving.

9:41AI voice

Aria

listening

Live call

00:18 · low latency

Every call, understood

The transcript, intent, and next step arrive together when the call ends.

Call transcript
00:18
CallerCan I move tomorrow’s delivery to Friday morning?00:08
AriaFriday morning is available. I can update it now.00:11
Delivery moved to Fridayready

Acts while it talks

Book, update, and hand off work without sending the caller somewhere else.

Calendar
CRM
Support
#1842

Call completed

Delivery updated and confirmation sent.

Install

$ bunx --bun shadcn add @beui-pro/features-voice-ai

Feature showcase

features-showcase.tsx

A split header over three gradient-stage cards, each framing a product screenshot with a title and description below.

System explanation

One library.Every layer covered.

beUI gives you the motion, polish, and structure to ship premium interfaces faster — without rebuilding the basics.

Add a pricing block and a hero to my landing.
Pricing — plans grid
Hero — code demo
Footer — spotlight
CTA — gradient FAQ

Four blocks added

Done — your landing page is assembled.
pricing.tsxhero.tsxfooter.tsx

Assemble a page in minutes

Drop in premium blocks — pricing, hero, footer, CTA — and a full landing page comes together fast.

pricing.tsx
hero-code-demo.tsx
footer-spotlight.tsx
agent-chat-input.tsx
cta-faq.tsx
features-tabs.tsx
pricing.tsx
hero-code-demo.tsx
footer-spotlight.tsx
agent-chat-input.tsx
cta-faq.tsx
features-tabs.tsx

Source files, fully yours

Every component ships as real source you can read, edit, and own — no black-box dependency.

$ npx shadcn add

@beui-pro/pricing
added pricing

Install in one command

Add any premium component straight from your private registry with the shadcn CLI.

Install

$ bunx --bun shadcn add @beui-pro/features-showcase

Feature list

features-list.tsx

A left-aligned feature list where the active item brightens and drives a synced animated visual on the right.

Built to ship

Everything you need to shippremium UI, nothing in your way.

From primitive to shipped block in minutes — polished, animated, and ready to publish.

pricing.tsx Copied

Install

$ bunx --bun shadcn add @beui-pro/features-list

Feature steps

features-steps.tsx

A centered header over a numbered three-step flow: the active step expands and drives a synced visual mock.

Simple by design

From idea to shipped UI in three steps

Turn a single prompt into a finished interface — compose premium blocks and own the source, all from one workflow.

Build a pricing page with a hero and a gradient CTA for my SaaS.

GenerateCompose

Install

$ bunx --bun shadcn add @beui-pro/features-steps

Feature bento

features-bento.tsx

An asymmetric bento grid of agent-platform features over animated Grainient WebGL backdrops, each cell with its own self-contained looping animation — a scripted agent conversation, a tool-connect terminal, a scrolling memory recall, a structured-output builder, and a human-in-the-loop approval gate. Backdrops and loops pause when off-screen.

Why agents

Everything your agent needs,wired up out of the box.

Tools, memory, streaming, and tracing — ship a production agent without stitching the plumbing together yourself.

Find recent AI papers and email me a summary.
Working
web_search
read_page
send_email
Sent 5 papers to your inbox — summary included.

Watch the agent reason

It plans, calls the right tools, and reports back — the full loop, streamed step by step.

$ agent tools add

connectedweb-search
connectedcode-runner
connectedpostgres

Add a tool in one line

Plug in any MCP server or function — the agent discovers and calls it automatically.

Prefers concise answers
Stack: Postgres + Vercel
Timezone GMT+5:30

Remembers what matters

Long-term memory and retrieval, baked in across runs.

output.json schema

{

"intent": "summarize",

"sources": 5,

"confidence": 0.94

}

Returns structured output

Schema-valid, typed JSON every time — ready to use downstream.

Approval needed

deploy → production?

Pauses for approval

Asks before risky actions — approve or edit each step.

Install

$ bunx --bun shadcn add @beui-pro/features-bento

Feature tabs

features-tabs.tsx

An interactive feature showcase: a shared-layout tab list drives an animated preview panel with a framed screenshot for each feature.

How it fits together

One library,every layer.

Interaction primitives that feel alive

Buttons, inputs, tabs, and toggles with tuned press, hover, and focus motion — the building blocks of a polished UI.

  • Spring press feedback
  • Shared-layout toggles
  • Focus states

Install

$ bunx --bun shadcn add @beui-pro/features-tabs

Feature stage tabs

features-stage-tabs.tsx

Four large horizontal tabs drive a shared product stage with coded workspace, automation, insights, and learning scenes, responsive snap scrolling, autoplay, and keyboard navigation.

Every conversation stays in context

Bring requests, customer history, and team decisions into one calm workspace.

Relay workspace

Aria Flores

Product workspace

Assign
Can you help us move the design team onto the annual workspace?
Absolutely. I’ve prepared the workspace change and kept your current permissions intact.
Write a reply

Install

$ bunx --bun shadcn add @beui-pro/features-stage-tabs