Important

This library is still in early development. New changes can break existing functionality, and no functionality should be considered final. The library will be considered stable once it reaches v1.0.

---

Table of Contents

• Table of Contents
• Documentation
• Getting started
  • Prerequisites
  • Installation
  • Setup
  • Using Components
• Components

Documentation

Full documentation coming soon on webcoreui.dev/docs.

Getting Started

Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems.

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

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

• For Astro projects
  • Astro - v4.10 and above
• For Svelte projects
  • Svelte - v4.2 and above
• For React projects
  • React - v18.3 and above
  • React DOM -v18.3 and above

Installation

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

# Using NPM
npm i webcoreui

# Using Yarn
yarn add webcoreui

Setup

1. Add the following to your tsconfig.json to include TypeScript types:

{
  "include": ["webcoreui"]
}

2. 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'
));

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.
includeHelperClasses	true	Adds global helper classes for CSS. All global helper classes are defined here.
includeElementStyles	true	Adds styles for native HTML elements, such as code, pre, or ul.

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

:root {
    --w-avatar-border: #000;
    --w-rating-color: #FFF;
    --w-rating-empty-color: #BBB;
    --w-rating-size: 18px;
}

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

• Accordion
• Alert
• Avatar
• Badge
• Button
• Card
• Checkbox
• ConditionalWrapper
• Icon
• Radio
• Rating
• Switch