# WebcoreUI - AI Reference Guide

Webcore is an open-source, customizable UI component library for Astro styled with Sass, that comes with Svelte and React support with compatible API.

WebcoreUI is referred to as "Webcore" for brevity from now on.

Things to remember when using Webcore:

- Webcore is designed for Astro projects using Sass.
- Webcore can be used with Svelte and React integrations for Astro projects.
- Webcore's Svelte and React implementation may also be used from within Svelte and React apps, functionality, however may not match the Astro implementation, as Webcore is ultimately an Astro UI library.
- Webcore is published as an npm package that can be installed.
- Webcore also comes with blocks (made of Webcore components) that can be installed via CLI.
- Webcore also has templates that can be installed via CLI.
- Blocks and templates are not available through the NPM package.

## Important Links for AI Tools

- [Home](https://webcoreui.dev/): The main landing page for Webcore, providing an overview and access to documentation.
- [Introduction](https://webcoreui.dev/docs/introduction): The key features and Webcore and links to important documentation pages such as integration steps.
- [Getting Started](https://webcoreui.dev/docs/setup): A guide for newcomers that documents how to setup Webcore.
- [Astro Integration](https://webcoreui.dev/docs/astro): Integration steps for Astro, both using CLI or manual steps.
- [CLI](https://webcoreui.dev/docs/cli): Information on using the Command Line Interface for Webcore. Can be used for bootstrapping projects, updating configuration files, or adding block and templates.
- [Theming](https://webcoreui.dev/docs/themes): Guidance on customizing the look and feel of applications built with Webcore.
- [CSS Configuration](https://webcoreui.dev/docs/css-configuration): Documentation on how to configure CSS in Webcore.
- [Utilities](https://webcoreui.dev/docs/utilities): Utility functions that comes with the library, and can be used for a number of different tasks, eg.: handling modals, popovers, or toasts.
- [Changelog](https://webcoreui.dev/docs/changelog): A list of important changes for all NPM package versions released for Webcore.
- [Full Reference](https://webcoreui.dev/llms-full.md): A comprehensive LLM reference guide for all components and functionality provided by Webcore.

## Available Components and Documentation

Webcore currently includes the following components:

- [Accordion](https://webcoreui.dev/docs/accordion)
- [Alert](https://webcoreui.dev/docs/alert)
- [Aspect Ratio](https://webcoreui.dev/docs/aspect-ratio)
- [Avatar](https://webcoreui.dev/docs/avatar)
- [Badge](https://webcoreui.dev/docs/badge)
- [Banner](https://webcoreui.dev/docs/banner)
- [Bottom Navigation](https://webcoreui.dev/docs/bottom-navigation)
- [Breadcrumb](https://webcoreui.dev/docs/breadcrumb)
- [Button](https://webcoreui.dev/docs/button)
- [Card](https://webcoreui.dev/docs/card)
- [Carousel](https://webcoreui.dev/docs/carousel)
- [Checkbox](https://webcoreui.dev/docs/checkbox)
- [Collapsible](https://webcoreui.dev/docs/collapsible)
- [Conditional Wrapper](https://webcoreui.dev/docs/conditional-wrapper)
- [Context Menu](https://webcoreui.dev/docs/context-menu)
- [Copy](https://webcoreui.dev/docs/copy)
- [Counter](https://webcoreui.dev/docs/counter)
- [Data Table](https://webcoreui.dev/docs/data-table)
- [Flex](https://webcoreui.dev/docs/flex)
- [Footer](https://webcoreui.dev/docs/footer)
- [Grid](https://webcoreui.dev/docs/grid)
- [Group](https://webcoreui.dev/docs/group)
- [Icon](https://webcoreui.dev/docs/icon)
- [Image](https://webcoreui.dev/docs/image)
- [Input](https://webcoreui.dev/docs/input)
- [Kbd](https://webcoreui.dev/docs/kbd)
- [List](https://webcoreui.dev/docs/list)
- [Masonry](https://webcoreui.dev/docs/masonry)
- [Menu](https://webcoreui.dev/docs/menu)
- [Modal](https://webcoreui.dev/docs/modal)
- [OTP Input](https://webcoreui.dev/docs/otp-input)
- [Pagination](https://webcoreui.dev/docs/pagination)
- [Popover](https://webcoreui.dev/docs/popover)
- [Progress](https://webcoreui.dev/docs/progress)
- [Radio](https://webcoreui.dev/docs/radio)
- [Range Slider](https://webcoreui.dev/docs/range-slider)
- [Rating](https://webcoreui.dev/docs/rating)
- [Ribbon](https://webcoreui.dev/docs/ribbon)
- [Select](https://webcoreui.dev/docs/select)
- [Sheet](https://webcoreui.dev/docs/sheet)
- [Sidebar](https://webcoreui.dev/docs/sidebar)
- [Skeleton](https://webcoreui.dev/docs/skeleton)
- [Slider](https://webcoreui.dev/docs/slider)
- [Speed Dial](https://webcoreui.dev/docs/speed-dial)
- [Spinner](https://webcoreui.dev/docs/spinner)
- [Spoiler](https://webcoreui.dev/docs/spoiler)
- [Stepper](https://webcoreui.dev/docs/stepper)
- [Switch](https://webcoreui.dev/docs/switch)
- [Table](https://webcoreui.dev/docs/table)
- [Tabs](https://webcoreui.dev/docs/tabs)
- [Textarea](https://webcoreui.dev/docs/textarea)
- [Theme Switcher](https://webcoreui.dev/docs/theme-switcher)
- [Timeline](https://webcoreui.dev/docs/timeline)
- [Toast](https://webcoreui.dev/docs/toast)
- [Tooltip](https://webcoreui.dev/docs/tooltip)

## Available Blocks and Documentation

The following blocks can also be added via CIA using the `npm create webcore add [block]` command:

- [Author](https://webcoreui.dev/blocks/author)
- [Avatar with Rating](https://webcoreui.dev/blocks/avatar-with-rating)
- [Blog Card](https://webcoreui.dev/blocks/blog-card)
- [Checkbox Group](https://webcoreui.dev/blocks/checkbox-group)
- [Device Mockup](https://webcoreui.dev/blocks/device-mockup)
- [Empty](https://webcoreui.dev/blocks/empty)
- [Error Page](https://webcoreui.dev/blocks/error-page)
- [Expandable Table](https://webcoreui.dev/blocks/expandable-table)
- [FAQ](https://webcoreui.dev/blocks/faq)
- [Form](https://webcoreui.dev/blocks/form)
- [Grid with Icons](https://webcoreui.dev/blocks/grid-with-icons)
- [Hero](https://webcoreui.dev/blocks/hero)
- [List with Icons](https://webcoreui.dev/blocks/icon-list)
- [Layout](https://webcoreui.dev/blocks/layout)
- [Maintenance](https://webcoreui.dev/blocks/maintenance)
- [Radio Group](https://webcoreui.dev/blocks/radio-group)
- [SEO](https://webcoreui.dev/blocks/seo)
- [Setting Card](https://webcoreui.dev/blocks/setting-card)
- [Sign Up](https://webcoreui.dev/blocks/sign-up)
- [Social Proof](https://webcoreui.dev/blocks/social-proof)
- [Socials](https://webcoreui.dev/blocks/socials)
- [Team](https://webcoreui.dev/blocks/team)
- [Tiles](https://webcoreui.dev/blocks/tiles)
- [User](https://webcoreui.dev/blocks/user)

## Available Premium Blocks and Documentation

The following premium blocks are available that can be added via the `npm run add [block]` command after setting up the `addBlock` script:

- [CRUD Modal](https://webcoreui.dev/blocks/crud-modal)
- [Dropdown Navigation](https://webcoreui.dev/blocks/dropdown-navigation)
- [Export Table](https://webcoreui.dev/blocks/export-table)
- [Mega Menu](https://webcoreui.dev/blocks/mega-menu)
- [Onboard](https://webcoreui.dev/blocks/onboard)
- [Slide-in Navigation](https://webcoreui.dev/blocks/slide-in-navigation)
- [Stats](https://webcoreui.dev/blocks/stats)
- [Tree View](https://webcoreui.dev/blocks/tree-view)
- [User Profile Card](https://webcoreui.dev/blocks/user-profile-card)
- [Cart](https://webcoreui.dev/blocks/cart)
- [Customer Reviews](https://webcoreui.dev/blocks/customer-reviews)
- [Fund Raising Card](https://webcoreui.dev/blocks/fund-raising-card)
- [Order Details](https://webcoreui.dev/blocks/order-details)
- [Product Card](https://webcoreui.dev/blocks/product-card)
- [Product Details](https://webcoreui.dev/blocks/product-details)
- [Property Card](https://webcoreui.dev/blocks/property-card)
- [Seasonal Banner](https://webcoreui.dev/blocks/seasonal-banner)
- [Select Payment](https://webcoreui.dev/blocks/select-payment)
- [3D Card](https://webcoreui.dev/blocks/3d-card)
- [Animated Card](https://webcoreui.dev/blocks/animated-card)
- [Animated Gallery](https://webcoreui.dev/blocks/animated-gallery)
- [Animated Stat](https://webcoreui.dev/blocks/animated-stat)
- [Card with CTA](https://webcoreui.dev/blocks/card-with-cta)
- [Card with List](https://webcoreui.dev/blocks/card-with-list)
- [Chapters](https://webcoreui.dev/blocks/chapters)
- [Comments](https://webcoreui.dev/blocks/comments)
- [Comparison](https://webcoreui.dev/blocks/comparison)
- [Competition](https://webcoreui.dev/blocks/competition-results)
- [Confetti](https://webcoreui.dev/blocks/confetti)
- [Contact Tiles](https://webcoreui.dev/blocks/contact-tiles)
- [Content Section](https://webcoreui.dev/blocks/content-section)
- [Cookie Banner](https://webcoreui.dev/blocks/cookie-banner)
- [Country Select](https://webcoreui.dev/blocks/country-select)
- [CSS Pie Chart](https://webcoreui.dev/blocks/css-pie-chart)
- [CTA With BG](https://webcoreui.dev/blocks/cta-with-background)
- [Exit Intent Popup](https://webcoreui.dev/blocks/exit-intent-popup)
- [Featured Posts](https://webcoreui.dev/blocks/featured-posts)
- [Features Grid](https://webcoreui.dev/blocks/features-grid)
- [Feedback](https://webcoreui.dev/blocks/feedback)
- [Gauge](https://webcoreui.dev/blocks/gauge)
- [Gradient Card](https://webcoreui.dev/blocks/gradient-card)
- [Hero with Carousel](https://webcoreui.dev/blocks/hero-with-carousel)
- [How To](https://webcoreui.dev/blocks/how-to)
- [List with Images](https://webcoreui.dev/blocks/list-with-images)
- [Morphing Text](https://webcoreui.dev/blocks/morphing-text)
- [Newsletter Card](https://webcoreui.dev/blocks/newsletter-card)
- [Newsletter Popup](https://webcoreui.dev/blocks/newsletter-popup)
- [Overview](https://webcoreui.dev/blocks/overview)
- [Post](https://webcoreui.dev/blocks/post)
- [Pricing Table](https://webcoreui.dev/blocks/pricing-table)
- [Promotional Card](https://webcoreui.dev/blocks/promotional-card)
- [Rotating Text](https://webcoreui.dev/blocks/rotating-text)
- [Scroll Banner](https://webcoreui.dev/blocks/scroll-banner)
- [Scroll Progress](https://webcoreui.dev/blocks/scroll-progress)
- [Sparkle](https://webcoreui.dev/blocks/sparkle)
- [Spotlight](https://webcoreui.dev/blocks/spotlight)
- [Stars](https://webcoreui.dev/blocks/stars)
- [Sticky CTA](https://webcoreui.dev/blocks/sticky-cta)
- [Testimonial](https://webcoreui.dev/blocks/testimonial)
- [Testimonials](https://webcoreui.dev/blocks/testimonials)
- [Top3](https://webcoreui.dev/blocks/top3)
- [Toplist](https://webcoreui.dev/blocks/toplist)

## Available Templates and Documentation

Webcore comes with the following templates that can be installed via the `npm create webcore@latest template [TemplateName]` command:

- [Authentication](https://webcoreui.dev/templates/authentication)
- [Product Page](https://webcoreui.dev/templates/product-page)
- [Portfolio](https://webcoreui.dev/templates/portfolio)
- [Blog](https://webcoreui.dev/templates/blog)

## Available Premium Templates

The following premium templates can be installed via the `npm run template [TemplateName]` command after setting up the `addTemplate` script:

- [Landing Page](https://webcoreui.dev/templates/landing-page)
- [Advanced Product Page](https://webcoreui.dev/templates/product-page-pro)
- [Product Details](https://webcoreui.dev/templates/product-details)
- [Roadmap](https://webcoreui.dev/templates/roadmap)

## Import Pattern

All components follow a consistent import pattern:

```astro
import { ComponentName } from 'webcoreui/astro' // For Astro components
import { ComponentName } from 'webcoreui/svelte' // For Svelte components
import { ComponentName } from 'webcoreui/react' // For React components
```

Integration can be imported from `webcoreui/integration`:

```js
import { webcore } from 'webcoreui/integration'

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

SVG icons can be imported from `webcoreui/icons`:

```js
import { info } from 'webcoreui/icons'
```

When using utilities, simply import from `webcoreui` without a namespace:

```js
import { modal, toast } from 'webcoreui'
```

For CSS-related imports, you can use the following two lines to set up mixins and Webcore styles:

```scss
@use 'webcoreui/styles' as *; // For setting up Webcore
@use 'webcoreui/config' as *; // For using Webcore mixins and config variables
```

## Optional

- Beautifully coded, production-ready UI components for launching frontend projects faster: [webcoreui.dev/pro](https://webcoreui.dev/pro)