webcoreui

Webcore UI(패키지 이름 webcoreui)는 Frontendland의 오픈소스 UI 컴포넌트 라이브러리입니다. README에 따르면 Sass로 스타일을 지정한 커스터마이징 가능한 Astro UI 컴포넌트 라이브러리로, Svelte와 React를 지원합니다. 독립형 프로젝트로 사용하거나 기존 Astro, Svelte, React 생태계에 통합할 수 있으며, 컴포넌트는 webcoreui/astro, webcoreui/svelte, webcoreui/react에서 가져올 수 있습니다. 문서는 webcoreui.dev에서 확인할 수 있으며, 설정 문서와 시각적 빌더가 포함되어 있습니다. 시작은 npm create webcore@latest를 통해 CLI를 이용할 수 있습니다. CLI는 새로운 Webcore 프로젝트를 생성하거나, 기존 Astro 프로젝트의 구성 파일을 업데이트하거나, Portfolio와 같은 이름의 템플릿으로부터 프로젝트를 만들 수 있습니다. 수동 설치도 npm i webcoreui 또는 yarn add webcoreui로 가능합니다. Astro 프로젝트는 astro.config.mjs에 webcore() 통합을 추가합니다. README에서는 사전 요구 사항으로 Sass v1.100과 TypeScript v5.9를 명시하며, Astro에는 Astro v5.18, Svelte에는 Svelte v5.55, React에는 React/React DOM v19.2가 필요하다고 합니다. 또한 CSS 번들 크기를 개선하기 위해 astro-purgecss를 선택적으로 추가하는 것을 권장합니다. 스타일 설정은 webcore.config.scss 파일과 webcoreui/styles 설정 믹스를 호출하는 전역 SCSS 파일을 사용합니다. 설정 옵션에는 includeResets, includeUtilities, includeTooltip, includeScrollbarStyles, includeBreakpoints, theme, themes가 포함됩니다. README에서는 컴포넌트 스타일을 커스터마이징하는 CSS 변수를 문서화하며, Avatar, Banner, BottomNavigation, Checkbox, Collapsible, Counter, Masonry, Progress, Radio, RangeSlider, Rating, Ribbon, scrollbars, Skeleton, Slider, SpeedDial, Spinner, Spoiler, Stepper, Switch, ThemeSwitcher, Timeline, Tooltips, border radius, 그리고 오류 페이지와 같은 블록 스타일에 대한 예시를 제공합니다. 저장소는 UI 구성 요소를 컴포넌트, 블록, 템플릿으로 구성합니다. 나열된 컴포넌트는 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, Tooltip입니다. 블록은 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, User입니다. 템플릿은 Authentication, Blog, Portfolio, ProductPage가 포함됩니다. 프로젝트는 MIT 라이선스입니다.