Astro component library with Svelte+React support

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

Get Started Blocks GitHub

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.

...

Settings

Enable all notifications

Enable or disable all of your notification with one click. Previous settings will be overwritten. Security emails Marketing emails

Slack notifications

All messages Direct messages only No notifications

...

SEO Overview

Keep track of the SEO performance of your posts.

Underperforming 50%

OK 30%

SEO-friendly 20%

...

Emily QA Engineer

Tasks

IP W4567 - Home redesign

P1 W2345 - Payment gateway warnings

P3 W6789 - Investigate user auth issues

TODO W1357 - Mobile redesign

Phone	+1 234 5678
Email	emily@example.com
Slack	@emily09
Address	Mars, Pennsylvania

...

Marcus Top rated seller

★★★★★ 4.8 out of 5 • 123 reviews

Loading reviews...

Explore other sellers

...

Deployments

Connect your project to GitHub to start running automatic deployments. ...

Marketing emails enabled

Explore All Blocks

50+ Free Components

Everything 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 Blocks

Speed 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 Themes

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

12 total entries

Components

Explore all components

Accordion

We provide 30 days of support.
Yes!
Hopefully.

Alert

💡 Note

You can create alert boxes.

Docs
Components

Button

Card

Paragraph inside a card

Carousel

Checkbox

Accept terms and conditions

Collapsible

This book has been rated for...

ID	Tech
1	Astro
No results.

Switch theme
No results.

Component new components

SetupGet ready
ConfigurePreferences

Switch

Table

ID	Name
1	Webcore

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.

Free

Blog Build your blog and share your content with the world.

Free

Portfolio Showcase your expertise and share your work with others.

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.

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

Premium components
Additional templates
Lifetime access
Free, frequent updates

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

Astro component library with Svelte+React support

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

Blocks

Build complex UIs in seconds

Components

Ready-to-launch Templates

Powerful CLI

Ship Faster with Premium UI Components

Start building with Webcore

Ship Faster
with Premium UI Components