Setup

WebcoreUI can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems. The easiest way to get started is to run the following command in your terminal, and follow the prompts:

npm create webcore@latest

npm create webcore@latest config

You can also clone the repository and run npm run dev to start building your pages with the components available.

Using a Template

If you want to use one of our templates, you can run the following command in your terminal:

npm create webcore@latest template [TemplateName] [destination]

# 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

You can find the list of available templates in our GitHub repository. When using the CLI, make sure you reference the name of the template folder.

Manual Install

If you’re looking for specific instructions on how to integrate WebcoreUI into your tech stack, we recommend reading through our integration guides:

WebcoreUI components use Sass for styling and TypeScript for type safety. To use the component library, make sure you have the following packages installed:

• Sass - v1.100
• TypeScript - v5.9

You can use the following command in your terminal to installed the above packages if you don’t have them already:

npm i sass typescript

yarn add sass typescript

The library can be used with Astro, Svelte, and React. Depending on your project setup, you’ll also need the following packages:

• Astro: v5.18
• Svelte: v5.55
• React: v19.2 + React DOM

• Installation

  Install WebcoreUI as a dependency by running the following command:

  NPMYarn

  npm i webcoreui

  yarn add webcoreui

• Setup Configurations

  Add an empty webcore.config.scss file at the root of your project. You can read more about how you can configure your CSS using this file in the CSS Configuration section.

  Setup default styles and fonts by calling the following in your global SCSS file:

  @use 'webcoreui/styles' as *;
  @include setup((
      // Define paths for your fonts
      fontRegular: '/fonts/Inter-Regular.woff2',
      fontBold: '/fonts/Inter-Bold.woff2'
  ));

  You can download the fonts WebcoreUI uses from the public/fonts directory.

  You’ll also need to add the following integration to your Astro configuration file at the root of your project directory:

  import { webcore } from 'webcoreui/integration'
  
  export default defineConfig({
      integrations: [webcore()]
  })

• Using Components

  That’s it! You’re all set to start using WebcoreUI components in your Astro project:

  ---
  import { Alert } from 'webcoreui/astro'
  ---
  
  <Alert theme="info">WebcoreUI is ready</Alert>