Setup

How to install Webcore

Webcore 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

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

Manual Install

Webcore 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.77 and above
• TypeScript - v5.4 and above

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: v4.10 and above
• Svelte: v4.2 and above
• React: v18.3 and above + React DOM

• Installation

  Install Webcore as a dependency by running the following command:

  NPM Yarn

  npm i webcoreui

  yarn add webcoreui

• Setup

  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:

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

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