UI component library with Svelte and React support, offering pre-built components for front-end projects. Components are configurable, themable, and accessible.
Features
Pre-made Components
A wide range of pre-built UI components that you can use to quickly set up your frontend projects without coding from scratch.
Configurable Blocks
Offers blocks which are fully configurable, allowing you to customize and adapt them to meet specific project requirements.
Dark/Light Themes
Includes both dark and light theme options to ensure that you can match the UI to your preferred style or user expectations.
Multiple Framework Support
Webcore supports Astro, Svelte, and React out of the box, enabling consistent visuals across different tech stacks.
Configurable
Components are designed with configurability in mind, allowing use in a wide variety of cases.
Themeable
CSS is easily configurable for creating different themes; components can be themed via CSS variables.
No Dependencies
Webcore doesn't rely on any third-party package except supported frameworks, simplifying the setup process.
Accordion Component
Allows you to create toggleable content sections hidden behind headers. It's customizable for use with Astro, Svelte, and React frameworks, and can be integrated with a simple import statement.
Icon Customization
The component supports icon customization, allowing you to use default chevron, or opt for plus icons, or remove icons entirely. This is controlled with the 'icon' prop.
Reverse and Alternating Layout
Supports reverse and alternating layout options, letting you change the order of icons and titles in the accordion items using 'reverse' and 'item.reverse' props.
Integration with Frameworks
Webcore can be integrated into your existing Astro, Svelte, or React ecosystems, allowing you to leverage its components across popular front-end frameworks.
Sass and TypeScript Support
Webcore components utilize Sass for styling and TypeScript for type safety, providing a modern and robust development environment.
Custom Configuration
You can customize the default styles and fonts by setting up the 'webcore.config.scss' file, allowing you to tailor the visual components to match your project's design needs.
Font Management
Webcore provides downloadable fonts directly from the 'public/fonts' directory, streamlining the process of incorporating desired typography styles into your project.
Command-Line Interface
Install and set up Webcore using simple npm commands, facilitating easy integration and initialization in your development environment.
Component Imports
Import Webcore components depending on your project framework from specific paths: 'webcoreui/astro', 'webcoreui/svelte', or 'webcoreui/react'. This allows streamlined integration of Webcore components into your project.
Importing Icons
Allows importing of icon components either for server-side rendering or client-side use as SVG strings, optimizing your bundle size by not including all icons if they're not needed.
Utilities Import
Import utility functions directly from 'webcoreui' to use in your project, simplifying the integration of common functionalities provided by Webcore.
CSS Imports
Provides two exports that can be used in SCSS files: 'webcoreui/styles' to import setup mixin for loading other SCSS files and 'webcoreui/config' for using Webcore mixins and config variables.
Base Style Inclusion
Configure default styles included for HTML elements like body, p, or ul with the 'includeReset' option. Set to false if you wish to use your custom CSS reset.
Utility Class Inclusion
Utilize 'includeUtilities' to add utility classes for CSS based on the available utility classes.
Typography Styles
The 'includeTypography' option lets you add basic typography styles.
Forms Styling
The 'includeForms' option adds styles to various form elements.
Multiple Framework Support
Webcore supports Astro, Svelte, and React out of the box, allowing for consistent visuals across different tech stacks.
Configurable
Webcore UI components are designed to be easily configurable to meet your needs, allowing for customization in various use cases.
Themeable
CSS in Webcore is themeable, enabling you to create different themes for your components using CSS variables.
Container
A container for fixed-width or full-width layout, providing a wrapper for content with basic padding and margins.
Row and Column Classes
Create responsive flexbox grids with predefined classes for rows and columns that adjust based on screen size.
Flex Utilities
Use flex utilities to control the responsive alignment and spacing of content without adding cumbersome CSS.
Alignment
Align content to the start, center, or end of the container using predefined alignment classes.
Direction
Change the direction of flex items with classes to switch between row and column layouts.
Wrap
Enable control over how flex items wrap with classes that define how items should be displayed in rows or columns.
Responsive Design
Use media queries and flexible grid systems to create responsive layouts that adapt seamlessly to different screen sizes.
Grid System
Leverage a robust grid system to design complex layouts using predefined classes and customizable rows and columns for your content.
Optimization Tips
Guidance on optimizing layout components with strategies for reducing CSS bundle sizes and improving performance.
PostCSS Configuration
Instructions for setting up PostCSS to compile and optimize CSS files for better performance in production environments.