🚀 Ship faster with premium components 🚀
Search documentation v1.1.0
Introducing Context Menu ->

Astro component library with Svelte+React support

Rocket launch your frontend projects with fully coded components. Configurable. Themeable. Accessible.

Get Started Blocks GitHub

Blocks

Build faster with ready-made UI blocks
Sign up
...
  • 2020 Founded
    Launched our mission to transform online shopping with a handpicked selection of goods and a commitment to unparalleled customer care.
  • 2021 Expanded Offerings
    Introduced over 500 unique, locally-sourced products, enriching our collection and supporting small businesses.
  • 2022 ⭐ Achieved Milestone
    Proudly served 100,000 happy customers, marked by launching same-day delivery in major cities and exclusive membership perks.
...
Settings
Slack notifications
...
SEO Overview
Keep track of the SEO performance of your posts.
Underperforming 50%
OK 30%
SEO-friendly 20%
...
Phone +1 234 5678
Email emily@example.com
Slack @emily09
Address Mars, Pennsylvania
...
Avatar
Marcus Top rated seller
★★★★★ 4.8 out of 5 • 123 reviews
Loading reviews...
Explore other sellers
MarcusGiuseppeEmilyFrankJonathan
...
Deployments
Connect your project to GitHub to start running automatic deployments. ...
Marketing emails enabled
Are you sure?
Confirm update

Automatic deployments will be enabled for your project.
Explore All Blocks

Build complex UIs in seconds

Drop in powerful components like data tables, searchable selects, and carousels without starting from scratch.
---
import { Card, DataTable } from 'webcoreui/astro'
import { headings, entries } from '@data'
---


<Card compact={true}>
    <DataTable
        headings={headings}
        data={entries}
        filterPlaceholder="Search users"
        showFilterIcon={true}
        noResultsLabel="We found no users..."
        columnToggleLabel="Hide Columns"
        subText={`${entries.length} total entries`}
        itemsPerPage={5}
        pagination={{ showChevrons: true }}
    />
</Card>
  • User ID
  • Score
#1 47 suspended
#2 195 inactive
#3 177 inactive
#4 4 inactive
#5 145 active
#6 299 suspended
#7 150 active
#8 23 active
#9 92 active
#10 68 inactive
#11 121 inactive
#12 160 inactive
We found no users...
12 total entries

Components

Explore all components
accordion alert aspect-ratio avatar badge banner bottom-navigation breadcrumb button card carousel checkbox collapsible copy data-table footer group icon input kbd list masonry menu modal otp-input pagination popover progress radio rating ribbon select sheet sidebar skeleton slider speed-dial spinner spoiler stepper switch table tabs textarea theme-switcher timeline toast tooltip
Explore All Components

Ready-to-launch Templates

Kickstart your project with pre-built pages like product pages, blog, or portfolio templates.
Blog
Free  
Blog Build your blog and share your content with the world.
Portfolio
Free  
Portfolio Showcase your expertise and share your work with others.
Product Page
Free  
Product Page Customizable and easy to setup template for your products.
Explore All Templates

Powerful CLI

Use the Webcore CLI to add blocks, configure projects, and bootstrap templates in seconds.
Terminal window
# Create a new Webcore project
npm create webcore@latest


# Update configuration files for an existing Astro project
npm create webcore@latest config


# Add the "Author" block
npm create webcore@latest add Author


# Add all blocks
npm create webcore@latest add all


# Add block to a specific directory
npm create webcore add Author components


# Use the "Portfolio" template on the current directory
npm create webcore@latest template Portfolio


# Create the "Portfolio" template in the "portfolio" directory
npm create webcore@latest template Portfolio ./portfolio

Ship Faster
with Premium UI Components

Rocket launch your frontend projects. Get access to beautifully coded,
production-ready UI components for Astro, Svelte, and React.

Explore Webcore Pro -> Premium UI components

Start building with Webcore

Webcore is open-source. Install with the command below to get started.
Get Started npm i webcoreui