Cloudensis Design System

Button

<Button>ボタン</Button>
クリックで全選択

LinkButton

見た目は Button と同じまま、a 要素としてレンダリングします。

リンクボタン
<LinkButton href="/">リンクボタン</LinkButton>
クリックで全選択

Input

type に checkbox / radio を渡すと、それぞれに合わせたスタイルでレンダリングします。

<Input type="text" placeholder="テキスト" />
<Input type="checkbox" />
<Input type="radio" name="sample" />
クリックで全選択

Select

<Select>
	<option value="">選択してください</option>
</Select>
クリックで全選択

Textarea

<Textarea rows={4} placeholder="お問い合わせ内容" />
クリックで全選択

Tooltip

ホバー（とフォーカス）で補足を表示します。開閉は CSS だけで行うため、クライアント JavaScript を読み込まずに動作します。 ラベルは pointer-events-none なので、表示中でもクリックやホバーを遮りません。

上に表示します
下に表示します
<Tooltip label="上に表示します">
	<Button>ホバーしてください</Button>
</Tooltip>
クリックで全選択

CodeBlock

lang を渡すと Shiki でハイライトします。ハイライトは同期的に行うため、SSG・SSR・CSR のいずれからでもそのまま呼び出せます。

コードは user-select: all を指定しているため、クリック 1 回で全体が選択されます。あとは Ctrl / Cmd + C でコピーできます。 その操作はホバー時のツールチップで案内しており、クライアント JavaScript は一切読み込みません。

import { Button } from "@cloudensis/design-system/components/ui/button";

export function ContactForm() {
	return (
		<form method="post" action="/contact">
			<Button type="submit">送信する</Button>
		</form>
	);
}
クリックで全選択
@import "tailwindcss";
@import "@cloudensis/design-system/index.css";

@theme {
	--color-bg: #ffffff;
	--color-fg: #171717;
}
クリックで全選択

コードブロックはページの配色に関わらず常にダークで表示します。配色は --color-code-* トークンで定義しており、Shiki のテーマ（vitesse-dark）と合わせています。

lang を省略した場合はハイライトせずそのまま表示します。

cloudensis Inc.
クリックで全選択
<CodeBlock lang="tsx">{code}</CodeBlock>
<CodeBlock>{code}</CodeBlock>
クリックで全選択

同梱している文法は css / html / javascript / json / markdown / shellscript / tsx / yaml です。 ts・jsx・jsonc・sh・md・yml などの別名も同じ文法として扱います。

DescriptionList

term と details の組を、2 列のグリッドとして並べます。

会社名
cloudensis
設立
2026年9月17日
<DescriptionList
	items={[{ term: "会社名", details: "cloudensis" }]}
/>
クリックで全選択

Section

見出し付きのセクションです。id を渡すとページ内リンクになります。

セクションの見出し

セクションの本文です。

<Section id="services" title="事業内容">...</Section>
クリックで全選択