{"id":21523807,"url":"https://github.com/frontendland/webcoreui","last_synced_at":"2025-04-09T22:51:20.786Z","repository":{"id":244036803,"uuid":"813841048","full_name":"Frontendland/webcoreui","owner":"Frontendland","description":"Customizable Astro UI component library styled with Sass, with Svelte and React support.","archived":false,"fork":false,"pushed_at":"2025-03-31T19:36:49.000Z","size":3596,"stargazers_count":61,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T22:51:10.052Z","etag":null,"topics":["astro","components","css","html","javascript","library","react","sass","scss","svelte","typescript","ui","ui-components","ui-library","webcore"],"latest_commit_sha":null,"homepage":"https://webcoreui.dev","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Frontendland.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-11T21:09:00.000Z","updated_at":"2025-04-09T14:54:02.000Z","dependencies_parsed_at":"2024-06-12T16:02:26.277Z","dependency_job_id":"334bc134-9485-4d67-8451-43439fb905ac","html_url":"https://github.com/Frontendland/webcoreui","commit_stats":null,"previous_names":["frontendland/webcoreui"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontendland%2Fwebcoreui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontendland%2Fwebcoreui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontendland%2Fwebcoreui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontendland%2Fwebcoreui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Frontendland","download_url":"https://codeload.github.com/Frontendland/webcoreui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125643,"owners_count":21051766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","components","css","html","javascript","library","react","sass","scss","svelte","typescript","ui","ui-components","ui-library","webcore"],"created_at":"2024-11-24T01:19:25.701Z","updated_at":"2025-04-09T22:51:20.776Z","avatar_url":"https://github.com/Frontendland.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\n    \u003ca href=\"https://webcoreui.dev\"\u003e\n      \u003cimg\n            alt=\"Webcore - Frontend components for Astro, Svelte, and React\"\n            src=\"https://raw.githubusercontent.com/Frontendland/webcoreui/main/public/img/banner.png\"\n        /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/Frontendland/webcoreui/releases\"\u003e\n        \u003cimg\n            src=\"https://img.shields.io/npm/v/webcoreui.svg?label=Latest%20Release\"\n            alt=\"Latest Release\"\n        /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/Frontendland/webcoreui/blob/main/LICENSE\"\u003e\n        \u003cimg\n            src=\"https://img.shields.io/badge/license-MIT-blue\"\n            alt=\"License\"\n        /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/Frontendland/webcoreui/actions\"\u003e\n        \u003cimg\n            src=\"https://img.shields.io/github/actions/workflow/status/Frontendland/webcoreui/checks.yml\"\n            alt=\"Build\"\n        /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/webcoreui\"\u003e\n        \u003cimg\n            src=\"https://img.shields.io/npm/d18m/webcoreui.svg?color=black\"\n            alt=\"NPM\"\n        /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Documentation](#documentation)\n- [Getting started](#getting-started)\n    - [Prerequisites](#prerequisites)\n    - [Installation](#installation)\n    - [Setup](#setup)\n    - [Using Components](#using-components)\n- [Components](#components)\n\n## Documentation\n\nFull documentation available on [webcoreui.dev](https://webcoreui.dev).\n\n## Getting Started\n\nWebcore 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.\n\n### Prerequisites\n\n\u003e [!NOTE]\n\u003e Before getting started, make sure you have a package manager installed, such as \u003ca href=\"https://nodejs.org/en/\" rel=\"noreferrer\"\u003eNode\u003c/a\u003e.\n\nWebcore components use Sass for styling. To use the component library, you must have the following packages installed:\n\n- [Sass](https://www.npmjs.com/package/sass) - `v1.86`\n- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.8`\n\nDepending on your project setup, you'll also need the following packages:\n\n- **For Astro projects**\n    - [Astro](https://www.npmjs.com/package/astro) - `v5.5`\n- **For Svelte projects**\n    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.25`\n- **For React projects**\n    - [React](https://www.npmjs.com/package/react) - `v19.0`\n    - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.0`\n\n### Installation\n\nInstall Webcore as a dependency by running one of the following command:\n\n```bash\n# Using NPM\nnpm i webcoreui\n\n# Using Yarn\nyarn add webcoreui\n```\n\n### Setup\n\nCreate 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:\n\n```scss\n@use 'webcoreui/styles' as *;\n@include setup((\n    // Define paths for your fonts\n    fontRegular: '/fonts/Inter-Regular.woff2',\n    fontBold: '/fonts/Inter-Bold.woff2'\n));\n```\n\n\u003e [!TIP]\n\u003e You can download the fonts Webcore uses from the [`public/fonts`](https://github.com/Frontendland/webcoreui/tree/main/public/fonts) directory.\n\nThe `Setup` mixin can also accept the following options:\n\n\n| Property  | Default value | Purpose |\n|-----------|---------------|---------|\n| `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |\n| `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |\n| `includeTooltip` | `true` | Adds styles for using tooltips.\n| `includeScrollbarStyles` | `true` | Adds styles for scrollbars.\n\nDefault component styles can be changed by overriding the following CSS variables:\n\n```scss\nhtml body {\n    // Avatar component\n    --w-avatar-border: var(--w-color-primary-70);\n\n    // Banner component\n    --w-banner-top: 0;\n\n    // BottomNavigation component\n    --w-bottom-navigation-max-width: auto;\n\n    // Checkbox component\n    --w-checkbox-color: var(--w-color-primary);\n\n    // Collapsible component\n    --w-collapsible-initial-height: 0;\n    --w-collapsible-max-height: 100%;\n\n    // Masonry component\n    --w-masonry-gap: 5px;\n\n    // Progress component\n    --w-progress-color: var(--w-color-primary);\n    --w-progress-background: var(--w-color-primary-50);\n    --w-progress-stripe-light: var(--w-color-primary);\n    --w-progress-stripe-dark: var(--w-color-primary-10);\n\n    // Radio component\n    --w-radio-color: var(--w-color-primary);\n\n    // Rating component\n    --w-rating-color: var(--w-color-primary);\n    --w-rating-empty-color: var(--w-color-primary);\n    --w-rating-empty-background: var(--w-color-primary-70);\n    --w-rating-size: 18px;\n\n    // Ribbon component\n    --w-ribbon-offset: 20px;\n    --w-ribbon-folded-offset: 10px;\n\n    // Scrollbars\n    --w-scrollbar-bg: var(--w-color-primary-60);\n    --w-scrollbar-fg: var(--w-color-primary-50);\n\n    // Skeleton component\n    --w-skeleton-color: var(--w-color-primary-60);\n    --w-skeleton-wave-color: var(--w-color-primary-50);\n\n    // Slider component\n    --w-slider-background: var(--w-color-primary-50);\n    --w-slider-color: var(--w-color-primary);\n    --w-slider-thumb: var(--w-color-primary-50);\n\n    // SpeedDial component\n    --w-speed-dial-size: 50px;\n\n    // Spinner component\n    --w-spinner-color: var(--w-color-primary);\n    --w-spinner-width: 2px;\n    --w-spinner-speed: 2s;\n    --w-spinner-size: 30px;\n    --w-spinner-dash: 8;\n\n    // Spoiler component\n    --w-spoiler-color: var(--w-color-primary);\n\n    // Stepper component\n    --w-stepper-color-border: var(--w-color-primary-50);\n    --w-stepper-color-active: var(--w-color-info);\n    --w-stepper-color-complete: var(--w-color-success);\n\n    // Switch component\n    --w-switch-off-color: var(--w-color-primary-50);\n    --w-switch-on-color: var(--w-color-primary);\n\n    // ThemeSwitcher component\n    --w-theme-switcher-size: 20px;\n\n    // Timeline component\n    --w-timeline-color: var(--w-color-primary-50);\n    --w-timeline-text-color: var(--w-color-primary);\n    --w-timeline-counter: decimal;\n\n    // Tooltips\n    --w-tooltip-background: var(--w-color-primary);\n    --w-tooltip-color: var(--w-color-primary-70);\n\n    // Override border-radius\n    --w-sm-radius: 2px;\n    --w-md-radius: 5px;\n    --w-lg-radius: 10px;\n    --w-xl-radius: 15px;\n}\n```\n\n### Using Components\n\nStart using Webcore components in your code by importing them:\n\n```astro\n---\n// Import the component relevant to your project\n// How to import Astro components\nimport { Accordion } from 'webcoreui/astro'\n\n// How to import Svelte components\nimport { Accordion } from 'webcoreui/svelte'\n\n// How to import React components\nimport { Accordion } from 'webcoreui/react'\n---\n\n\u003cAccordion items={[{ ... }]} /\u003e\n```\n\n## Components\n\n- [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)\n- [Alert](https://github.com/Frontendland/webcoreui/tree/main/src/components/Alert)\n- [AspectRatio](https://github.com/Frontendland/webcoreui/tree/main/src/components/AspectRatio)\n- [Avatar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Avatar)\n- [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)\n- [Banner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Banner)\n- [BottomNavigation](https://github.com/Frontendland/webcoreui/tree/main/src/components/BottomNavigation)\n- [Breadcrumb](https://github.com/Frontendland/webcoreui/tree/main/src/components/Breadcrumb)\n- [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)\n- [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)\n- [Carousel](https://github.com/Frontendland/webcoreui/tree/main/src/components/Carousel)\n- [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)\n- [Collapsible](https://github.com/Frontendland/webcoreui/tree/main/src/components/Collapsible)\n- [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)\n- [Copy](https://github.com/Frontendland/webcoreui/tree/main/src/components/Copy)\n- [DataTable](https://github.com/Frontendland/webcoreui/tree/main/src/components/DataTable)\n- [Flex](https://github.com/Frontendland/webcoreui/tree/main/src/components/Flex)\n- [Footer](https://github.com/Frontendland/webcoreui/tree/main/src/components/Footer)\n- [Grid](https://github.com/Frontendland/webcoreui/tree/main/src/components/Grid)\n- [Group](https://github.com/Frontendland/webcoreui/tree/main/src/components/Group)\n- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)\n- [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)\n- [Kbd](https://github.com/Frontendland/webcoreui/tree/main/src/components/Kbd)\n- [List](https://github.com/Frontendland/webcoreui/tree/main/src/components/List)\n- [Masonry](https://github.com/Frontendland/webcoreui/tree/main/src/components/Masonry)\n- [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)\n- [Modal](https://github.com/Frontendland/webcoreui/tree/main/src/components/Modal)\n- [OTPInput](https://github.com/Frontendland/webcoreui/tree/main/src/components/OTPInput)\n- [Pagination](https://github.com/Frontendland/webcoreui/tree/main/src/components/Pagination)\n- [Popover](https://github.com/Frontendland/webcoreui/tree/main/src/components/Popover)\n- [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)\n- [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)\n- [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)\n- [Ribbon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Ribbon)\n- [Select](https://github.com/Frontendland/webcoreui/tree/main/src/components/Select)\n- [Sheet](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sheet)\n- [Sidebar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sidebar)\n- [Skeleton](https://github.com/Frontendland/webcoreui/tree/main/src/components/Skeleton)\n- [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)\n- [SpeedDial](https://github.com/Frontendland/webcoreui/tree/main/src/components/SpeedDial)\n- [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)\n- [Spoiler](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spoiler)\n- [Stepper](https://github.com/Frontendland/webcoreui/tree/main/src/components/Stepper)\n- [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)\n- [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)\n- [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)\n- [Textarea](https://github.com/Frontendland/webcoreui/tree/main/src/components/Textarea)\n- [ThemeSwitcher](https://github.com/Frontendland/webcoreui/tree/main/src/components/ThemeSwitcher)\n- [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro)\n- [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)\n- [Tooltip](https://github.com/Frontendland/webcoreui/blob/main/src/pages/tooltip.astro)\n\n## Blocks\n\n- [Author](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Author)\n- [BlogCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/BlogCard)\n- [ComponentMap](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ComponentMap)\n- [DeviceMockup](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/DeviceMockup)\n- [ErrorPage](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ErrorPage)\n- [FAQ](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/FAQ)\n- [GridWithIcons](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/GridWithIcons)\n- [Hero](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Hero)\n- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Icon)\n- [IconList](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/IconList)\n- [Layout](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Layout)\n- [Maintenance](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Maintenance)\n- [SEO](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SEO)\n- [SettingCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SettingCard)\n- [SignUp](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SignUp)\n- [SocialProof](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SocialProof)\n- [Socials](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Socials)\n- [Team](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Team)\n- [Tiles](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Tiles)\n- [User](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/User)\n\n## Templates\n\n- [Blog](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Blog)\n- [Portfolio](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Portfolio)\n- [ProductPage](https://github.com/Frontendland/webcoreui/tree/main/src/templates/ProductPage)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontendland%2Fwebcoreui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontendland%2Fwebcoreui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontendland%2Fwebcoreui/lists"}