🚀 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.

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...

Components

Explore all components
Accordion
  • We provide 30 days of support.
  • Yes!
  • Hopefully.
Alert
💡 Note
You can create alert boxes.
Aspect Ratio
16 / 9
Avatar
avatar0avatar1avatar2avatar3avatar4
Badge
Badge
Banner
BottomNavigation
Breadcrumb
  • Docs
  • Components
Button
Card

Paragraph inside a card

Carousel
Checkbox
Collapsible
This book has been rated for...
Expand
Copy
Click to copy
DataTable
  • ID
ID Tech
1 Astro
No results.
Footer
WEBCORE
Group
Icon
Input
Kbd
⌘⇧K
List
  • Switch theme
  • No results.
Masonry
1
4
2
5
3
6
Menu
Modal
OTP Input
Pagination
Popover
Progress
Radio
Rating
★★★★
Ribbon
Ribbon
Select
Sheet
Sidebar
Component new components
Skeleton
 
Slider
SpeedDial
Spinner
Spoiler
This text is hidden.
Stepper
  1. SetupGet ready
  2. ConfigurePreferences
Switch
Table
IDName
1 Webcore
Tabs
Textarea
ThemeSwitcher
Timeline
  • Getting Started
  • Setup
Toast
Post saved
Tooltip

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