Table of Contents

Documentation

Getting Started

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 clone the repository and run npm run dev to start building your pages with the components available.

Prerequisites

Note

Before getting started, make sure you have a package manager installed, such as Node.

Webcore components use Sass for styling. To use the component library, you must have the following packages installed:

Sass - v1.9
TypeScript - v5.8

Depending on your project setup, you'll also need the following packages:

For Astro projects
- Astro - v5.13
For Svelte projects
- Svelte - v5.38
For React projects
- React - v19.0
- React DOM -v19.0

Installation with CLI

You can use our CLI tool to create a new Webcore project, or integrate it into an existing project more easily:

# Create a new Webcore project
npm create webcore@latest

# Update configuration files for an existing Astro project
npm create webcore@latest config

# Create a new Webcore project with a specific template
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

Manual Installation

Install Webcore as a dependency by running one of the following command:

# Using NPM
npm i webcoreui

# Using Yarn
yarn add webcoreui

Setup

Add the following integration to your Astro configuration file (astro.config.mjs) at the root of your project directory:

import { webcore } from 'webcoreui/integration'

export default defineConfig({
    integrations: [webcore()]
})

Create an empty webcore.config.scss file at the root of your project to setup CSS configurations. 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'
));

Tip

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

The setup mixin can also accept the following options:

Property	Default value	Purpose
`includeResets`	`true`	Include reset styles. Set to `false` if you want to use your own CSS resets.
`includeUtilities`	`true`	Adds utility classes for CSS. Read more about the available utility classes here.
`includeTooltip`	`true`	Adds styles for using tooltips.
`includeScrollbarStyles`	`true`	Adds styles for scrollbars.
`includeBreakpoints`	`true`	Exposes breakpoint variables in CSS for JS. Used by components for responsiveness.

Default component styles can be changed by overriding the following CSS variables:

html body {
    // Avatar component
    --w-avatar-border: var(--w-color-primary-70);

    // Banner component
    --w-banner-top: 0;

    // BottomNavigation component
    --w-bottom-navigation-max-width: auto;

    // Checkbox component
    --w-checkbox-color: var(--w-color-primary);

    // Collapsible component
    --w-collapsible-initial-height: 0;
    --w-collapsible-max-height: 100%;

    // Counter component
    --w-counter-width: 10ch;

    // Masonry component
    --w-masonry-gap: 5px;

    // Progress component
    --w-progress-color: var(--w-color-primary);
    --w-progress-background: var(--w-color-primary-50);
    --w-progress-stripe-light: var(--w-color-primary);
    --w-progress-stripe-dark: var(--w-color-primary-10);

    // Radio component
    --w-radio-color: var(--w-color-primary);

    // RangeSlider component
    --w-range-slider-background: var(--w-color-primary-50);
    --w-range-slider-color: var(--w-color-primary);
    --w-range-slider-thumb: var(--w-color-primary-50);

    // Rating component
    --w-rating-color: var(--w-color-primary);
    --w-rating-empty-color: var(--w-color-primary);
    --w-rating-empty-background: var(--w-color-primary-70);
    --w-rating-size: 18px;

    // Ribbon component
    --w-ribbon-offset: 20px;
    --w-ribbon-folded-offset: 10px;

    // Scrollbars
    --w-scrollbar-bg: var(--w-color-primary-60);
    --w-scrollbar-fg: var(--w-color-primary-50);

    // Skeleton component
    --w-skeleton-color: var(--w-color-primary-60);
    --w-skeleton-wave-color: var(--w-color-primary-50);

    // Slider component
    --w-slider-background: var(--w-color-primary-50);
    --w-slider-color: var(--w-color-primary);
    --w-slider-thumb: var(--w-color-primary-50);

    // SpeedDial component
    --w-speed-dial-size: 50px;

    // Spinner component
    --w-spinner-color: var(--w-color-primary);
    --w-spinner-width: 2px;
    --w-spinner-speed: 2s;
    --w-spinner-size: 30px;
    --w-spinner-dash: 8;

    // Spoiler component
    --w-spoiler-color: var(--w-color-primary);

    // Stepper component
    --w-stepper-color-border: var(--w-color-primary-50);
    --w-stepper-color-active: var(--w-color-info);
    --w-stepper-color-complete: var(--w-color-success);

    // Switch component
    --w-switch-off-color: var(--w-color-primary-50);
    --w-switch-on-color: var(--w-color-primary);

    // ThemeSwitcher component
    --w-theme-switcher-size: 20px;

    // Timeline component
    --w-timeline-color: var(--w-color-primary-50);
    --w-timeline-text-color: var(--w-color-primary);
    --w-timeline-counter: decimal;

    // Tooltips
    --w-tooltip-background: var(--w-color-primary);
    --w-tooltip-color: var(--w-color-primary-70);

    // Override border-radius
    --w-sm-radius: 2px;
    --w-md-radius: 5px;
    --w-lg-radius: 10px;
    --w-xl-radius: 15px;
}

Using Components

Start using Webcore components in your code by importing them:

---
// Import the component relevant to your project
// How to import Astro components
import { Accordion } from 'webcoreui/astro'

// How to import Svelte components
import { Accordion } from 'webcoreui/svelte'

// How to import React components
import { Accordion } from 'webcoreui/react'
---

<Accordion items={[{ ... }]} />

Components

Blocks

Templates