Introduction to Blocks

Building blocks made of Webcore components

Webcore blocks are ready to use, copy-paste blocks made from Webcore components. They can help you speed up your development process with section that you can copy-paste into your app, so you can focus on delivering features, rather than building components and layouts.

Blocks are not available in the NPM package and cannot be imported from webcoreui. Instead, you can copy blocks relevant to your project from GitHub.

How to Use Blocks

To use a block, simply click on the “Source” button at the top of the page, which will take you to source code of the block. Alternatively, you can view the source code of all blocks on our GitHub repository.

Copy the folder of the preferred block to your project, as they can include CSS or TypeScript types. If you’d like to import blocks using absolute imports, extend your tsconfig.json configuration file at the root of your project with the following lines:

{
    "extends": "astro/tsconfigs/strict",
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@blocks/*": ["src/blocks/*"]
        }
    }
}

Using the above configuration, after adding a block to your project, you’ll be able to import them in the following way:

---
import Hero from '@blocks/Hero/Hero.astro'
---

<Hero ... />

Free UI Blocks

Application Blocks

Dropdown Navigation

Slide-in Navigation

Onboard

E-commerce Blocks

Marketing Blocks