Velora UI

React feature sections

Free feature sections for React and Tailwind CSS: bento grids, icon grids, tabbed tours and screenshot splits that animate without hurting performance.

Bento feature grid

Five-card bento grid with live visuals: integration beams, orbiting icons, a chart, a tag marquee and a globe.

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/features-bento.json

Installs to components/blocks/features-bento.tsx with Animated Beam, Bento Grid, Blur Fade, Globe, Marquee, Number Ticker and Orbiting Circles.

Icon feature grid

Heading and six icon feature cards in a three-column grid, each border lit by a cursor-following glow.

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/features-icon-grid.json

Installs to components/blocks/features-icon-grid.tsx with Blur Fade and Glowing Effect.

Tabbed product tour

Product tour with animated tabs; each tab pairs short copy and a checklist with a Tailwind-built app mock.

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/features-tabs.json

Installs to components/blocks/features-tabs.tsx with Animated Tabs and Blur Fade.

Alternating screenshot rows

Two alternating rows of copy with a checklist beside a browser-framed dashboard mock, sides swapped.

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/features-split-screenshot.json

Installs to components/blocks/features-split-screenshot.tsx with Blur Fade, Border Beam and Browser Mockup.

Numbered steps

How-it-works section with four numbered steps on a gradient connector line, each with a small UI visual.

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/features-steps.json

Installs to components/blocks/features-steps.tsx with Avatar Circles, Blur Fade, Border Beam and Number Ticker.