k8ordo UIは、React 19で構築されたUIコンポーネントライブラリです。フォームやカードなどユーザーが操作する要素は丸みと余白で親しみやすく、情報を伝える要素はシャープさを保って明確に。穏やかだけど退屈じゃないUIを実現します。
お好みのパッケージマネージャーでインストールしてください。
インストール後、以下の2つの設定を行ってください。
ビルド済みCSSをアプリケーションのエントリーポイントでインポートしてください。Tailwind CSSのセットアップは不要です。
Tailwind CSS 4を使うプロジェクトは、代わりにソース版をインポートすると、デザイントークンを自分のマークアップのTailwindクラスとしても使えます。
UIProviderでアプリケーションをラップしてください。
セットアップが完了したら、コンポーネントをインポートして使用できます。
k8ordo UIを使用するには、以下のピア依存関係が必要です。
import '@k8ordo/ui/styles.css';import '@k8ordo/ui/tailwind.css';import { UIProvider } from '@k8ordo/ui';
function App({ children }) {
return (
<UIProvider>
{children}
</UIProvider>
);
}import { Button, Heading } from '@k8ordo/ui';
function MyComponent() {
return (
<div>
<Heading level="h1">Hello k8ordo UI</Heading>
<Button variant="solid">Click me</Button>
</div>
);
}npm install @k8ordo/ui