Introducing Context Menu ->
Astro component library with Svelte+React support
Rocket launch your frontend projects with fully coded components. Configurable. Themeable. Accessible.
- Install
Terminal window npm create webcore@latest - Use ---import { Button } from 'webcoreui/astro'---<Button>Welcome to Webcore!</Button><script>import { Button } from 'webcoreui/svelte'</script><Button>Welcome to Webcore!</Button>import { Button } from 'webcoreui/react'const Component = () => <Button>Welcome to Webcore!</Button>export default Component
Blocks
Build faster with ready-made UI blocks
- 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.
Slack notifications

Emily QA Engineer
Phone | +1 234 5678 |
emily@example.com | |
Slack | @emily09 |
Address | Mars, Pennsylvania |
Deployments
Connect your project to GitHub to start running automatic deployments. ...
Marketing emails enabled
- 50+ Free ComponentsEverything you need for your application from buttons and navigation elements to data tables and modals, created with configurability in mind. Explore our components documentation to get started.
- 20+ Configurable BlocksSpeed up your development process with configurable, ready to use blocks of elements created from Webcore components. Read more about how to start using blocks in your projects.
- Dark & Light ThemesWebcore comes with multiple themes out of the box. Customize or create your own themes using CSS variables. It also supports multiple themes at a time. Learn more about how to work with different themes.
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>
#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 Alert 💡 Note Aspect Ratio Avatar 



Badge BottomNavigation Breadcrumb Button Card Carousel Checkbox Collapsible Copy
Footer Group Icon
Input Kbd
Masonry Menu
Modal OTP Input Pagination Popover Progress Radio Rating Ribbon Sheet Sidebar Skeleton Slider SpeedDial Spinner Spoiler Switch Table
Tabs Textarea ThemeSwitcher Timeline Toast
Tooltip
Explore All Components
- We provide 30 days of support.
- Yes!
- Hopefully.
You can create alert boxes.
16 / 9





Badge
Banner Paragraph inside a card
- 1
This book has been rated for...
Expand
Click to copy
DataTable ID | Tech |
---|---|
1 | Astro |
No results. |
⌘⇧K
List -
Switch theme
- No results.
1
4
2
5
3
6
•
Ribbon
Select
Component
new components
This text is hidden.
Stepper -
SetupGet ready
-
ConfigurePreferences
ID | Name |
---|---|
1 | Webcore |
- Getting Started
- Setup
Post saved
Tooltip?
Ready-to-launch Templates
Kickstart your project with pre-built pages like product pages, blog, or portfolio templates.



Powerful CLI
Use the Webcore CLI to add blocks, configure projects, and bootstrap templates in seconds.
# Create a new Webcore projectnpm create webcore@latest
# Update configuration files for an existing Astro projectnpm create webcore@latest config
# Add the "Author" blocknpm create webcore@latest add Author
# Add all blocksnpm create webcore@latest add all
# Add block to a specific directorynpm create webcore add Author components
# Use the "Portfolio" template on the current directorynpm create webcore@latest template Portfolio
# Create the "Portfolio" template in the "portfolio" directorynpm 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.
production-ready UI components for Astro, Svelte, and React.
-
Premium components
-
Additional templates
-
Lifetime access
-
Free, frequent updates
Explore Webcore Pro ->

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