An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.
Radix UI
An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.
こんにちは！ 株式会社ココナラの法律相談事業部でWebエンジニアをしている 原井 です。 ココナラ法律相談 と ココナラエージェント という2つのプロダクトのWebフロントエンド・バックエンド開発を担当しています。 この記事は、フロントエンド開発に使うUIコンポーネントライブラリの技術選定をするシーンでのお話です。 私たちが何を課題に感じていたのか、どう考えて Radix UI と Stitches の採用に至ったのか、採用してみてどうだったのかをご紹介します。 UIコンポーネントを開発していて思うこと 世の中にはUIコンポーネント集とでも呼ぶべき便利なライブラリがたくさん公開されています。 例えば以下のようなものがあり、他にも把握しきれないほどあると思います。 MUI (Material UI) Ant Design Chakra UI Vuetify これらのUIコンポーネントライブラ
商用のプロジェクトでも無料で利用できる、スマホなどの小さなスクリーンに適した極小サイズでくっきりと鮮明に見えるSVGアイコンを紹介します。 SVGなので、もちろん大きいサイズでも美しく表示され、カラーの変更も簡単。しかもオープンソースなのは、嬉しいですね。 Radix Icons Radix Icons -GitHub Radix Iconsの特徴 Radix Iconsのダウンロード Radix Iconsの使い方 Radix Iconsの特徴 Radix Iconsはスマホなどの非常に小さいスペースでも視認性を損なわずに使用できるようデザインされたSVGアイコンで、極小サイズ（15x15）でもくっきりと鮮明に見えるようにデザインされています。 MITライセンスで、商用プロジェクトでも無料で利用できます。
Radix UIがよさそう
Chakraは詰め込みすぎだけど、tailwindのheadlessuiは貧弱すぎ、、という中でまさに欲しかったものが出てきたので簡単に紹介。 2023/01/26更新： 本記事は書かれてから時間が経っており、自分の認識が変わった部分もあるのでアップデートを記載しました。 Radix is 何 Radix（読み方:レイディックス）は、次世代のheadless uiコンポーネントです。headlessというのはstyleがあたっていないということで、UIを「見た目」と「振る舞い」に分けた時、「見た目」が取り除かれているようなイメージです。似た既存ライブラリだとtailwindのheadlessuiが近いですが、より完成度や網羅性が高い印象です。 radix-ui配下には、メインのコンポーネント群であるPrimitives、カラーシステムを提供するColors、Icon群を提供するIconsが
microCMSでプロダクトエンジニアをしています。りゅーそうです。 microCMSでは、UIコンポーネントを作成するのにRadix UIを採用しています。 Radix UIはいわゆるヘッドレスUIと呼ばれるUIライブラリで、UIの機能のみを提供します。 ChakraUIやMUIのようなUIライブラリの場合、既成のコンポーネントセットをそのままインポートして使うだけで良いケースも多いのですが、 Radix UIの場合、「Radix UIの機能」に加えて「自社サービスにあったデザイン」などを付与してコンポーネントを作成し使うことがほとんどです。 最近、私はSlider(Range)コンポーネントをRadix UIを使用して作成しました。 その際に意識したことなどをまとめました。 要約 Radix UIを最大限に活用するが、Radix UIの仕様を「なるべく意識しない」で使えるコンポーネント
GitHub - radix-ui/primitives: Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめにフロントエンド開発をしている中でUIライブラリを用いて開発することってありますよね。 機能や見た目、A11Yへの配慮など色々な役割を担ってくれますが、その中でも見た目に関しては独自で定義したいことが多いのではないでしょうか。 そんな時に便利な「Radix UI」というヘッドレスUIの1つをご紹介できればと思います！ ヘッドレスUIについてRadixUIについて紹介する前にヘッドレスUIについて少し説明させてください。 ヘッドレスUIとはUI要素やインタラクションのロジック、状態、処理、APIを提供し、マークアップやスタイルを提供しないライブラリやユーティリティを指す言葉です。 そのためプロダクトごとのデザインやブランドカラーと完全に合うようにカスタマイズして採用することができます。 そして、ヘッドレスUIと言われるライブラリにはcomponentベースとhooksベースがあります。
Radix UI と Tailwind CSS を使用して構築された再利用可能なコンポーネント！「shadcn/ui」 - ソフトウェア開発者のための OSS、まとめてみました！
概要 Web アプリやサービスを開発する際、UI 構築はどのように行っていますでしょうか？ 私自身は普段から React.js や Next.js を使用しており、UI 構築は Tailwind CSS を利用したり MUI を利用して簡単に作成してしまうことが結構多いです。 ja.reactjs.org nextjs.org tailwindcss.com mui.com そんな自分ですが、いつもと同じようなフレームワークだったりデザインを利用しているとどのサービスも同じような感じになってしまうのが欠点ですよね。 いつもと同じようなサービスやアプリにならないよう、新しいフレームワークだったりデザインセットがないか GitHub 上で探していたところ、良さそうなデザインセットを見つけることができましたので、今回はこちらについてご紹介したいと思います。 今回ご紹介する OSS は、Radix
GitHub - blefnk/relivator-nextjs-template: ⭐ Next.js 14: Store, Landing, Admin Dashboard ▲ i18n, Stripe, Shadcn Tailwind, Drizzle Zod Trpc TypeScript Auth Page, Lucide CSS Radix UI, Responsive React Server Components, MySQL and Neon Postgre TS ORM, Intl A
⭐ Next.js 14: Store, Landing, Admin Dashboard ▲ i18n, Stripe, Shadcn Tailwind, Drizzle Zod Trpc TypeScript Auth Page, Lucide CSS Radix UI, Responsive React Server Components, MySQL and Neon Postgre TS ORM, Intl App Router, Mdx Docs User Actions Kit, SaaS Commerce Shop Pricing Payments, Dark Mode, Modern Full Stack, Free ▲ more stars → more features
GitHub - radix-vue/radix-vue: Vue port of Radix UI Primitives. An open-source UI component library for building high-quality, accessible design systems and web apps.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヘッドレスUIコンポーネントでいこう -- Radix UI + Stitches がいい感じ
商用利用無料！スマホなどのUIデザインに最適、極小サイズでくっきりと鮮明に見えるSVGアイコン -Radix Icons
Radix UIでコンポーネントを作成する時に意識したこと
UIライブラリの「機能」は欲しいけど「見た目」はカスタマイズしたいを叶えるRadix UI