All categories

feature/*

Features

Show what you do — icon grid, alternating rows, or a check-list of capabilities.

5 variants
@vireya/blocks/feature/alternating

Two-column rows, side flips per row. Pair with screenshots.

server
How it stacks up

Built for production

Two columns, alternating sides. Pair with screenshots, mockups, or videos.

Bundling

Per-component subpaths

Import only what you need. No giant barrel file dragging the whole library into your bundle.

Bundling diagram
Theming

CSS variables, not props

Themes flow through the cascade. Override per page or per component without prop-drilling.

Theming preview
@vireya/blocks/feature/checkList

Bulleted feature comparison with custom icon support.

client
What's in the box

Everything included

What you get out of the box.

  • Free for personal projects

    MIT-licensed core, use it however you want.

  • Commercial license available

    Single-app or unlimited, your choice.

  • TypeScript-first APIs

    Strict types, inferred everything.

  • Server-component friendly

    Most sections render on the server.

@vireya/blocks/feature/highlights

Key-features grid in 4×2 — text-forward, no card chrome. Eyebrow + title + dense set of capability blurbs. Server component.

server
Key features

Powerful SVG downloading

Our extension offers a seamless and private way to download Flaticon SVGs, with powerful features to streamline your workflow.

  • Free SVG Downloads

    Access a vast library of SVG icons on Flaticon, completely free. Browse and download without any charges or limitations.

  • Seamless Integration

    Effortlessly integrate the extension into your workflow. Sits inside your browser for a hassle-free experience.

  • Instant Access

    Reach SVG files from Flaticon in just a few clicks, directly within your browser, for efficient design work.

  • High-Quality SVGs

    Download crisp, clear SVG icons sourced directly from Flaticon — ready for any design project.

  • Customization Options

    Tailor SVG icons to match your project requirements with easy-to-use, in-place customization options.

  • Time-Saving

    Eliminate manual downloads with one-click capture from your Chrome browser, saving you valuable time.

  • Regular Updates

    Stay current with the latest icons added to Flaticon's collection — fresh additions sync automatically.

  • User-Friendly Interface

    Browse Flaticon's extensive library through an intuitive surface tuned for keyboard and mouse alike.

@vireya/blocks/feature/iconGrid

Grid of icon + title + description cells, configurable columns.

server
Features

Why Vireya Sections

Composable building blocks, no copy-paste fatigue.

  • Fast by default

    Tree-shakable subpath imports, zero runtime CSS-in-JS, lean bundles.

  • Themeable to the core

    Every token is a CSS variable. Override per page, per component, per instance.

  • Composition first

    Slots, asChild, render props. No black-box opinions you can't escape.

@vireya/blocks/feature/steps

Numbered step-by-step guide — vertical list with auto-incremented step numbers (CSS counter). Server component.

server
Step-by-step

Get started in minutes

From install to your first deployment — a clean, six-step path with no surprises.

  1. Install the extension

    Add the official extension to Chrome from the Web Store. The icon will appear in your toolbar instantly.

  2. Sign in with your account

    Open the extension popup and sign in with email, Google, or GitHub — your workspace syncs in the background.

  3. Open any supported page

    Browse to a page where the extension is supported. The icon highlights when actions are available.

  4. Pick what you need

    Click the icon and choose between download, copy, or send-to-workspace from the inline menu.

  5. Tweak the output

    Resize, recolor, or rename in the side panel — your preferences are remembered for next time.

  6. Drop into your project

    Drag the file into your editor or paste the snippet directly. Done — and you're ready for the next one.

Understanding Features

Feature sections translate capabilities into benefits — they're where you show what the product does and why it matters. Format follows content: an icon grid scans quickly, alternating rows pair each feature with a visual, a checklist signals breadth, and steps explain a process.

Vireya ships icon-grid, alternating, highlights, check-list and steps variants so you can match the layout to the message.

When to use

  • Explaining a product's core capabilities on a landing or product page.
  • Pairing features with supporting visuals (alternating rows).
  • Signalling breadth quickly (icon grid or check-list).
  • Walking through a process or onboarding (steps).

When to avoid

  • Listing every feature — curation beats exhaustiveness on a marketing page.
  • Feature dumps with no benefit framing, which read as spec sheets.

Best practices

  • Frame each item as a benefit first, with the feature as support.
  • Keep items parallel in length and structure so the grid scans cleanly.
  • Use icons to aid scanning, not as decoration that competes with text.
  • Limit to the handful of features that drive the decision.

Accessibility

  • Treat decorative icons as aria-hidden; keep the text the source of truth.
  • Use consistent heading levels for feature titles within the section.
  • Ensure icon and text contrast meet AA at the rendered size.

Frequently asked questions

Which feature layout should I choose?
Match layout to content: an icon grid for scannable breadth, alternating rows when each feature deserves a visual, a check-list to signal coverage, and steps for a sequential process. Vireya provides a variant for each.
How many features should a section show?
Show the few that drive the decision — typically three to six. A curated set is more persuasive than an exhaustive spec list, which buries the points that actually matter.