webcoreui

Webcore UI (nome do pacote webcoreui) é uma biblioteca de componentes de UI open-source da Frontendland. O README a descreve como uma biblioteca de componentes de UI para Astro personalizável, estilizada com Sass, com suporte para Svelte e React. Pode ser utilizada como um projeto independente ou integrada em ecossistemas Astro, Svelte ou React existentes, e os componentes são importados de webcoreui/astro, webcoreui/svelte ou webcoreui/react. A documentação está disponível em webcoreui.dev, incluindo documentos de configuração e um construtor visual. Para começar, pode-se utilizar a CLI via npm create webcore@latest. A CLI pode criar um novo projeto Webcore, atualizar arquivos de configuração para um projeto Astro existente ou criar um projeto a partir de um template nomeado, como o Portfolio. A instalação manual também é possível com npm i webcoreui ou yarn add webcoreui. Projetos Astro adicionam a integração webcore() ao astro.config.mjs. O README observa os pré-requisitos: Sass v1.100 e TypeScript v5.9, além de Astro v5.18 para Astro, Svelte v5.55 para Svelte e React/React DOM v19.2 para React. Também recomenda opcionalmente a adição do astro-purgecss para melhorar o tamanho do bundle CSS. A configuração de estilização utiliza um arquivo webcore.config.scss e um arquivo SCSS global que chama o mixin de configuração webcoreui/styles. As opções de configuração incluem includeResets, includeUtilities, includeTooltip, includeScrollbarStyles, includeBreakpoints, theme e themes. O README documenta variáveis CSS para personalizar os estilos dos componentes, com exemplos para Avatar, Banner, BottomNavigation, Checkbox, Collapsible, Counter, Masonry, Progress, Radio, RangeSlider, Rating, Ribbon, barras de rolagem, Skeleton, Slider, SpeedDial, Spinner, Spoiler, Stepper, Switch, ThemeSwitcher, Timeline, Tooltips, raio da borda e estilos de bloco, como a página de erro. O repositório organiza as peças de construção da UI em componentes, blocos e templates. Os componentes listados incluem Accordion, Alert, AspectRatio, Avatar, Badge, Banner, BottomNavigation, Breadcrumb, Button, Card, Carousel, Checkbox, Collapsible, ConditionalWrapper, ContextMenu, Copy, Counter, DataTable, Flex, Footer, Grid, Group, Icon, Image, ImageLoader, Input, Kbd, List, Masonry, Menu, Modal, OTPInput, Pagination, Popover, Progress, Radio, RangeSlider, Rating, Ribbon, Select, Sheet, Sidebar, Skeleton, Slider, SpeedDial, Spinner, Spoiler, Stepper, Switch, Table, Tabs, Textarea, ThemeSwitcher, Timeline, Toast e Tooltip. Os blocos incluem Author, AvatarWithRating, BlogCard, CheckboxGroup, ComponentMap, DeviceMockup, Empty, ErrorPage, ExpandableTable, FAQ, Form, GridWithIcons, Hero, Icon, IconList, Layout, Maintenance, RadioGroup, SEO, SettingCard, SignUp, SocialProof, Socials, Team, Tiles e User. Os templates incluem Authentication, Blog, Portfolio e ProductPage. O projeto possui licença MIT.