https://github.com/frontendland/webcoreui

Customizable Astro UI component library styled with Sass, with Svelte and React support.
https://github.com/frontendland/webcoreui
astro components css html javascript library react sass scss svelte typescript ui ui-components ui-library webcore
Last synced: 3 months ago
JSON representation
Customizable Astro UI component library styled with Sass, with Svelte and React support.
Host: GitHub
URL: https://github.com/frontendland/webcoreui
Owner: Frontendland
License: mit
Created: 2024-06-11T21:09:00.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2025-03-31T19:36:49.000Z (3 months ago)
Last Synced: 2025-04-09T22:51:10.052Z (3 months ago)
Topics: astro, components, css, html, javascript, library, react, sass, scss, svelte, typescript, ui, ui-components, ui-library, webcore
Language: Astro
Homepage: https://webcoreui.dev
Size: 3.43 MB
Stars: 61
Watchers: 2
Forks: 4
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        


    

      

    





    

        

    

    

        

    

    

        

    

    

        

    



## Table of Contents

- [Table of Contents](#table-of-contents)

- [Documentation](#documentation)

- [Getting started](#getting-started)

    - [Prerequisites](#prerequisites)

    - [Installation](#installation)

    - [Setup](#setup)

    - [Using Components](#using-components)

- [Components](#components)

## Documentation

Full documentation available on [webcoreui.dev](https://webcoreui.dev).

## 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](https://www.npmjs.com/package/sass) - `v1.86`

- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.8`

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

- **For Astro projects**

    - [Astro](https://www.npmjs.com/package/astro) - `v5.5`

- **For Svelte projects**

    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.25`

- **For React projects**

    - [React](https://www.npmjs.com/package/react) - `v19.0`

    - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.0`

### Installation

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

```bash

# Using NPM

npm i webcoreui

# Using Yarn

yarn add webcoreui

```

### Setup

Create an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configuration#webcoreconfigscss) 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:

```scss

@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`](https://github.com/Frontendland/webcoreui/tree/main/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](https://webcoreui.dev/docs/layout). |

| `includeTooltip` | `true` | Adds styles for using tooltips.

| `includeScrollbarStyles` | `true` | Adds styles for scrollbars.

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

```scss

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%;

    // 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);

    // 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:

```astro

---

// 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'

---

```

## Components

- [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)

- [Alert](https://github.com/Frontendland/webcoreui/tree/main/src/components/Alert)

- [AspectRatio](https://github.com/Frontendland/webcoreui/tree/main/src/components/AspectRatio)

- [Avatar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Avatar)

- [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)

- [Banner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Banner)

- [BottomNavigation](https://github.com/Frontendland/webcoreui/tree/main/src/components/BottomNavigation)

- [Breadcrumb](https://github.com/Frontendland/webcoreui/tree/main/src/components/Breadcrumb)

- [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)

- [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)

- [Carousel](https://github.com/Frontendland/webcoreui/tree/main/src/components/Carousel)

- [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)

- [Collapsible](https://github.com/Frontendland/webcoreui/tree/main/src/components/Collapsible)

- [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)

- [Copy](https://github.com/Frontendland/webcoreui/tree/main/src/components/Copy)

- [DataTable](https://github.com/Frontendland/webcoreui/tree/main/src/components/DataTable)

- [Flex](https://github.com/Frontendland/webcoreui/tree/main/src/components/Flex)

- [Footer](https://github.com/Frontendland/webcoreui/tree/main/src/components/Footer)

- [Grid](https://github.com/Frontendland/webcoreui/tree/main/src/components/Grid)

- [Group](https://github.com/Frontendland/webcoreui/tree/main/src/components/Group)

- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)

- [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)

- [Kbd](https://github.com/Frontendland/webcoreui/tree/main/src/components/Kbd)

- [List](https://github.com/Frontendland/webcoreui/tree/main/src/components/List)

- [Masonry](https://github.com/Frontendland/webcoreui/tree/main/src/components/Masonry)

- [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)

- [Modal](https://github.com/Frontendland/webcoreui/tree/main/src/components/Modal)

- [OTPInput](https://github.com/Frontendland/webcoreui/tree/main/src/components/OTPInput)

- [Pagination](https://github.com/Frontendland/webcoreui/tree/main/src/components/Pagination)

- [Popover](https://github.com/Frontendland/webcoreui/tree/main/src/components/Popover)

- [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)

- [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)

- [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)

- [Ribbon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Ribbon)

- [Select](https://github.com/Frontendland/webcoreui/tree/main/src/components/Select)

- [Sheet](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sheet)

- [Sidebar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sidebar)

- [Skeleton](https://github.com/Frontendland/webcoreui/tree/main/src/components/Skeleton)

- [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)

- [SpeedDial](https://github.com/Frontendland/webcoreui/tree/main/src/components/SpeedDial)

- [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)

- [Spoiler](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spoiler)

- [Stepper](https://github.com/Frontendland/webcoreui/tree/main/src/components/Stepper)

- [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)

- [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)

- [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)

- [Textarea](https://github.com/Frontendland/webcoreui/tree/main/src/components/Textarea)

- [ThemeSwitcher](https://github.com/Frontendland/webcoreui/tree/main/src/components/ThemeSwitcher)

- [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro)

- [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)

- [Tooltip](https://github.com/Frontendland/webcoreui/blob/main/src/pages/tooltip.astro)

## Blocks

- [Author](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Author)

- [BlogCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/BlogCard)

- [ComponentMap](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ComponentMap)

- [DeviceMockup](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/DeviceMockup)

- [ErrorPage](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ErrorPage)

- [FAQ](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/FAQ)

- [GridWithIcons](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/GridWithIcons)

- [Hero](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Hero)

- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Icon)

- [IconList](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/IconList)

- [Layout](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Layout)

- [Maintenance](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Maintenance)

- [SEO](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SEO)

- [SettingCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SettingCard)

- [SignUp](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SignUp)

- [SocialProof](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SocialProof)

- [Socials](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Socials)

- [Team](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Team)

- [Tiles](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Tiles)

- [User](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/User)

## Templates

- [Blog](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Blog)

- [Portfolio](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Portfolio)

- [ProductPage](https://github.com/Frontendland/webcoreui/tree/main/src/templates/ProductPage)
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/frontendland/webcoreui

Awesome Lists containing this project

README
