デザインシステムカタログ

注目の5件

5

GitHubスター数を参考に選定

67 件のデザインシステム — pixiv Charcoal

Ant Design — 全体像 — 公式コンポーネントの実装見本Ant Design中国企業・OSS参考Microsoft Fluent 2 — 全体像 — 公式コンポーネントの実装見本Microsoft Fluent 2米国企業・OSS参考Astryx — 全体像 — 公式コンポーネントの実装見本Astryxアメリカ企業・OSSAdobe React Aria — 全体像 — 公式コンポーネントの実装見本Adobe React Aria米国企業・OSSGitHub Primer — 全体像 — 公式コンポーネントの実装見本GitHub Primer米国企業・OSS参考

公開日が新しい順

62
Cloudflare Kumo — 全体像 — 公式コンポーネントの実装見本Cloudflare Kumo米国企業・OSS参考Salesforce Lightning Design System 2 — 全体像 — 公式コンポーネントの実装見本Salesforce Lightning Design System 2米国企業・OSSSansan One Design System — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャSansan One Design System日本企業・OSSCoinbase Design System — 全体像 — 公式コンポーネントの実装見本Coinbase Design System米国企業・OSS参考Serendie Design System — 全体像 — 公式コンポーネントの実装見本Serendie Design System日本企業・OSSkaonavi sugao — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャkaonavi sugao日本企業・OSS参考Ubie Vitals — 全体像 — 公式コンポーネントの実装見本Ubie Vitals日本企業・OSS参考freee vibes — 全体像 — 公式コンポーネントの実装見本freee vibes日本企業・OSSAdobe Spectrum 2 — 全体像 — 公式コンポーネントの実装見本Adobe Spectrum 2米国企業・OSS一休 Design Guideline — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャ一休 Design Guideline日本企業・OSSDBS Data Visualisation — デザイン活動 — 公式サイトのキャプチャ公式サイトのキャプチャDBS Data Visualisationシンガポール企業・OSSBits UI — 全体像 — 公式コンポーネントの実装見本Bits UI国際OSS企業・OSS参考GC Design System — 全体像 — 公式コンポーネントの実装見本GC Design Systemカナダ政府・公共Wise Design — 全体像 — 公式コンポーネントの実装見本Wise Designイギリス企業・OSSデジタル庁デザインシステム (DADS) — 全体像 — 公式コンポーネントの実装見本デジタル庁デザインシステム (DADS)日本政府・公共Kobalte — 全体像 — 公式コンポーネントの実装見本Kobalte国際OSS企業・OSS参考KoliBri — 全体像 — 公式コンポーネントの実装見本KoliBriドイツ政府・公共参考Cloudscape — 全体像 — 公式コンポーネントの実装見本Cloudscapeアメリカ企業・OSSpixiv Charcoal — 全体像 — 公式コンポーネントの実装見本pixiv Charcoal日本企業・OSSCookpad Apron — 公開紹介 — 公式サイトのキャプチャ公式サイトのキャプチャCookpad Apron日本企業・OSS参考Agriculture Design System (AgDS) — 全体像 — 公式コンポーネントの実装見本Agriculture Design System (AgDS)オーストラリア政府・公共Tencent TDesign — 全体像 — 公式コンポーネントの実装見本Tencent TDesign中国企業・OSS参考SPEEDA FALCON — 公開紹介 — 公式サイトのキャプチャ公式サイトのキャプチャSPEEDA FALCON日本企業・OSSArco Design — 全体像 — 公式コンポーネントの実装見本Arco Design中国企業・OSS参考Semi Design — 全体像 — 公式コンポーネントの実装見本Semi Design中国企業・OSS参考Spindle — 全体像 — 公式コンポーネントの実装見本Spindle日本企業・OSSFinastra Design System — 全体像 — 公式コンポーネントの実装見本Finastra Design System英国企業・OSS参考Decathlon Vitamin — 全体像 — 公式コンポーネントの実装見本Decathlon Vitaminフランス企業・OSS参考monday.com Vibe — 全体像 — 公式コンポーネントの実装見本monday.com Vibeイスラエル企業・OSS参考Système de Design de l’État (DSFR) — 全体像 — 公式コンポーネントの実装見本Système de Design de l’État (DSFR)フランス政府・公共参考SmartHR Design System — 全体像 — 公式コンポーネントの実装見本SmartHR Design System日本企業・OSSCzech Design System — 全体像 — 公式コンポーネントの実装見本Czech Design Systemチェコ政府・公共参考Twilio Paste — 全体像 — 公式コンポーネントの実装見本Twilio Pasteアメリカ企業・OSS参考SGDS — 全体像 — 公式コンポーネントの実装見本SGDSシンガポール政府・公共参考Airtable Blocks SDK UI — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャAirtable Blocks SDK UI米国企業・OSS参考CFPB Design System — 全体像 — 公式コンポーネントの実装見本CFPB Design Systemアメリカ政府・公共参考Esri Calcite Design System — 全体像 — 公式コンポーネントの実装見本Esri Calcite Design System米国企業・OSS参考ING Lion — 全体像 — 公式コンポーネントの実装見本ING Lionオランダ企業・OSS参考BC Design System — 全体像 — 公式コンポーネントの実装見本BC Design Systemカナダ政府・公共参考Porsche Design System — 全体像 — 公式コンポーネントの実装見本Porsche Design Systemドイツ企業・OSS参考Contentful Forma 36 — 全体像 — 公式コンポーネントの実装見本Contentful Forma 36ドイツ企業・OSS参考GOV.UK — 全体像 — 公式コンポーネントの実装見本GOV.UKイギリス政府・公共Vaadin Design System — 全体像 — 公式コンポーネントの実装見本Vaadin Design Systemフィンランド企業・OSS参考Uber Base Web — 全体像 — 公式コンポーネントの実装見本Uber Base Web米国企業・OSS参考Gestalt — 全体像 — 公式コンポーネントの実装見本Gestaltアメリカ企業・OSS参考Kiwi.com Orbit — 全体像 — 公式コンポーネントの実装見本Kiwi.com Orbitチェコ企業・OSS参考Ariakit — 全体像 — 公式コンポーネントの実装見本Ariakit国際OSS企業・OSS参考Francfranc Design System — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャFrancfranc Design System日本企業・OSSSegment Evergreen — 全体像 — 公式コンポーネントの実装見本Segment Evergreen米国企業・OSS参考Shopify Polaris — 全体像 — 公式コンポーネントの実装見本Shopify Polarisカナダ企業・OSS参考IBM Carbon Design System — 全体像 — 公式コンポーネントの実装見本IBM Carbon Design System米国企業・OSS参考Europa Component Library — 全体像 — 公式コンポーネントの実装見本Europa Component LibraryEU政府・公共参考Audi Brand Guidelines — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャAudi Brand Guidelinesドイツ企業・OSS参考Designers Italia — 全体像 — 公式コンポーネントの実装見本Designers Italiaイタリア政府・公共参考GitLab Pajamas — 全体像 — 公式コンポーネントの実装見本GitLab Pajamasアメリカ企業・OSS参考Orange Boosted — 全体像 — 公式コンポーネントの実装見本Orange Boostedフランス企業・OSS参考U.S. Web Design System (USWDS) — 全体像 — 公式コンポーネントの実装見本U.S. Web Design System (USWDS)アメリカ政府・公共WFP UI Kit — 全体像 — 公式コンポーネントの実装見本WFP UI Kit国際機関政府・公共参考Liferay Lexicon — 全体像 — 公式コンポーネントの実装見本Liferay Lexicon米国企業・OSS参考Bristol Design System — 全体像 — 公式コンポーネントの実装見本Bristol Design Systemイギリス政府・公共参考Red Hat PatternFly — 全体像 — 公式コンポーネントの実装見本Red Hat PatternFly米国企業・OSS参考Atlassian Design System — 全体像 — 公式コンポーネントの実装見本Atlassian Design Systemオーストラリア企業・OSS参考

pixiv Charcoal

公式サイト (新しいタブで開く)GitHub (新しいタブで開く)

pixivのコンテンツ体験を支えるデザインシステム。Web向けのReact実装と共通スタイルを公開しています。

実装プレビュー
@charcoal-ui/react 6.3.0
pixiv日本React / TypeScript / Tailwind CSS
公開日
公開日の根拠と補足

ピクシブの公式発表日。公開対象はWebフロントエンド向けの実装ライブラリ。

公開日の根拠
利用条件と実装の出典

ライセンス: Apache 2.0

公式の公開実装を共通の内容で描画しています。各ライブラリの利用条件は出典で確認してください。

実装の出典ソースコード

pixiv Charcoal全体像

1 / 2

キーボード操作

↓↑JK
デザインシステムを選択
HomeEnd
最初・最後の項目を選択
←→HL
プレビューを切り替え
V
プレビューを拡大
O
公式サイトを開く
?
このヘルプを表示
Esc
オーバーレイを閉じる / 一覧に戻る
TabShift + Tab
操作対象を移動
EnterSpace
フォーカス中の操作を実行

入力欄や言語選択の操作中はショートカットを無効にします。