webcoreui

Webcore UI（パッケージ名 webcoreui）はFrontendland提供のオープンソースUIコンポーネントライブラリです。READMEでは、SassでスタイリングされたAstro向けUIコンポーネントライブラリとして紹介され、SvelteおよびReactにも対応しています。スタンドアロンプロジェクトとして使用することもでき、既存のAstro、Svelte、Reactエコシステムに統合することも可能です。コンポーネントはwebcoreui/astro、webcoreui/svelte、webcoreui/reactからインポートされます。ドキュメントはwebcoreui.devで提供されており、セットアップ手順やビジュアルビルダーが含まれます。 CLIを使用した入門の手順はnpm create webcore@latestです。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 setup mixinを呼び出すグローバルSCSSファイルを使用します。設定オプションにはincludeResets、includeUtilities、includeTooltip、includeScrollbarStyles、includeBreakpoints、theme、themesがあります。READMEにはコンポーネントスタイルのカスタマイズ用CSS変数が文書化されており、Avatar、Banner、BottomNavigation、Checkbox、Collapsible、Counter、Masonry、Progress、Radio、RangeSlider、Rating、Ribbon、スクロールバー、Skeleton、Slider、SpeedDial、Spinner、Spoiler、Stepper、Switch、ThemeSwitcher、Timeline、Tooltips、ボーダーラディアス、エラーページなどのブロックスタイルの例が記載されています。 リポジトリは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ライセンスで提供されています。