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

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

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.80
• TypeScript - v5.4

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

• Installation

  Install Webcore as a dependency by running the following command:

  NPM Yarn

  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 Webcore uses from the public/fonts directory.

  You’ll also need to update your Astro configuration file at the root of your project directory with the following lines:

  export default defineConfig({
      vite: {
          ssr: {
              noExternal: ['webcoreui']
          }
          css: {
              preprocessorOptions: {
                  scss: {
                      api: 'modern-compiler'
                  }
              }
          }
      }
  })

  The noExternal option prevents Webcore from being externalized for SSR. This is required for correct bundling, otherwise Vite will not recognize .astro extensions. The preprocessorOptions is needed to make sure Vite uses the modern compiler of Sass. Once this option will be enabled by default in a future version of Vite, this configuration can be removed.

• Using Components

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

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