Feature Sections — UI Block

Ways to explain a product: tabs that advance on their own with a progress line, a timeline that draws itself in, and an orbit of integrations around your logo.

Pro
Feature grids
3 sections

Install

One command adds every section. Pro blocks need your API key in the registry settings.

$ npx shadcn@latest add @nexus-labs/feature-blocks

Full setup guide

Install the complete Feature Sections family with its 3 variants. The registry command adds the source files, required utility imports, and npm packages used by this block.

1
Prepare a shadcn project
Use a Next.js project with Tailwind CSS and the @/ alias. If shadcn is not configured yet, run:
```
npx shadcn@latest init
```

Connect the registry with your API key

Replace your components.json with this, or add the registries key to your existing one. Replace YOUR_NEXUS_API_KEY with the key from your Nexus UI dashboard.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": {
      "url": "https://www.nexus-ui.com/api/registry/{name}",
      "headers": {
        "Authorization": "Bearer YOUR_NEXUS_API_KEY"
      }
    }
  }
}

3
Install the full block family
Run this command from your project root. It installs every variant shown on this page.
```
npx shadcn@latest add @nexus-labs/feature-blocks
```
4
Files added to your project
The component package installs these block source files:
components/
blocks/
motion-kit/
auto-advancing-tabs/
auto-advancing-tabs.tsx
drawn-timeline/
drawn-timeline.tsx
integrations-orbit/
integrations-orbit.tsx
5
Copy the example into your page
Switch to the Codetab on the variant you want. On the left you'll see a ready-to-use snippet — copy it and paste it into app/page.tsx:
```
// app/page.tsx
import YourBlock from "@/components/...";

export default function Page() {
  return (
    <main>
      <YourBlock />
    </main>
  );
}
```
The exact import path is shown in the Code tab sidebar for each variant.

1 of 3Pro

Auto-advancing Tabs

One workspace, four jobs done.

To do

Write launch post

Pricing page copy

Doing

Onboarding emails

Done

Brand refresh

2 of 3Pro

Drawn Timeline

How it works

Live in an afternoon.

Step 1. About 2 minutes
Connect your tools
Sign in with Google or Microsoft and pick the apps you already use. Lumen imports the last 12 months in the background.
Step 2. 5 minutes
Choose what matters
Pick the numbers you check every week. We suggest a starting set based on teams like yours.
Step 3. 1 minute
Invite your team
Everyone gets their own view, with the same live data underneath. Permissions follow your org chart.
Step 4. Every week, automatically
Get your Monday back
A short summary lands in your inbox each week, with anything unusual flagged at the top.

3 of 3Pro

Integrations Orbit

Integrations

Plays well with the 120 apps you already pay for.

Two-way sync, not imports. Change something in one place and it's changed everywhere, usually within a second.

Browse all integrations

More blocks

See the whole wall ›

FeatureFeature Sections — UI Block

Auto-advancing Tabs

One workspace, four jobs done.

Drawn Timeline

Live in an afternoon.

Connect your tools

Choose what matters

Invite your team

Get your Monday back

Integrations Orbit

Plays well with the 120 apps you already pay for.

More blocks

Feature Sections — UI Block