{"id":50728825,"url":"https://github.com/someiro/liminal","last_synced_at":"2026-06-10T06:48:03.846Z","repository":{"id":363506291,"uuid":"1262107897","full_name":"someiro/liminal","owner":"someiro","description":"宣言型 React UI ライブラリ","archived":false,"fork":false,"pushed_at":"2026-06-09T07:15:12.000Z","size":81,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-10T06:48:01.515Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/someiro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-07T15:28:58.000Z","updated_at":"2026-06-09T07:15:16.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/someiro/liminal","commit_stats":null,"previous_names":["someiro/liminal"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/someiro/liminal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/someiro%2Fliminal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/someiro%2Fliminal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/someiro%2Fliminal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/someiro%2Fliminal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/someiro","download_url":"https://codeload.github.com/someiro/liminal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/someiro%2Fliminal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34140774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-10T06:48:00.962Z","updated_at":"2026-06-10T06:48:03.837Z","avatar_url":"https://github.com/someiro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg width=\"100%\" src=\"./assets/liminal.png\"\u003e\n    \u003cp\u003e\n    宣言型 React UI ライブラリ\u003cbr\u003e    \n    シンプルな組み立てコンポーネントによって、アプリケーション開発に集中することができます。\n    \u003c/p\u003e\n\u003c/div\u003e\n\n---\n# Setup\n\n1. このリポジトリをクローンし、プロジェクトの `components` ディレクトリに配置します。\n2. アプリケーションのエントリーポイントで `global.css` をインポートします。\n```tsx\nimport \"@/components/liminal/global.css\";\n```\n3. 必要なコンポーネントをインポートして使用します。\n```tsx\nimport { Button, Text } from \"@/components/liminal\";\n\nexport default function Page() {\n  return (\n    \u003cButton\u003e\n      \u003cText size=\"xl\" weight=\"bold\"\u003eHello, liminal\u003c/Text\u003e\n    \u003c/Button\u003e\n  );\n}\n```\n\n---\n\n# General\n\n## Button\n\n```tsx\n\u003cButton\n  disabled={false}\n  variant=\"filled\"\n  size=\"large\"\n  intention=\"primary\"\n  type=\"button\"\n  onClick={() =\u003e console.log(\"click\")}\n\u003e\n  Button\n\u003c/Button\u003e\n```\n\n### props\n\n- disabled\n  - boolean\n- variant\n  - \"outlined\" | \"filled\" | \"text\"\n- size\n  - \"small\" | \"large\"\n- intention\n  - \"primary\" | \"secondary\" | \"shade\" | \"negative\"\n- type\n  - \"button\" | \"submit\" | \"reset\"\n- onClick\n  - ClickEventHandler\u003cHTMLButtonElement\u003e\n- children\n  - ReactNode\n\n\u003e ボタン表示用コンポーネント。  \n\u003e `variant` によって見た目を切り替えることができます。  \n\u003e `disabled` が true の場合、操作できなくなります。\n\n---\n\n## Text\n\n```tsx\n\u003cText size=\"xl\" weight=\"bold\"\u003e\n  Hello Component00\n\u003c/Text\u003e\n```\n\n### props\n\n- size\n  - \"xs\" | \"s\" | \"r\" | \"xr\" | \"l\" | \"xl\"\n- weight\n  - \"normal\" | \"bold\"\n- children\n  - ReactNode\n\n\u003e テキスト表示用コンポーネント。  \n\u003e `size` を変更することで文字サイズを調整できます。\n\n---\n\n# Form\n\n## TextField\n\n```tsx\nconst [name, setName] = useState(\"A\");\n\n\u003cTextField\n  label=\"ユーザー名\"\n  disabled={false}\n  required={true}\n  error={false}\n  helperText=\"名前を入力してください\"\n  size=\"medium\"\n  value={name}\n  onChange={(e) =\u003e setName(e.target.value)}\n/\u003e;\n```\n\n### props\n\n- label\n  - string\n- disabled\n  - boolean\n- required\n  - boolean\n- error\n  - boolean\n- helperText\n  - string\n- size\n  - \"medium\"\n- value\n  - string\n- onChange\n  - ChangeEventHandler\u003cHTMLInputElement\u003e\n\n\u003e テキスト入力用コンポーネント。  \n\u003e `value` と `onChange` を使用することで、React state によるフォーム制御 (Controlled Component) に対応します。\n\n---\n\n## TextArea\n\n```tsx\nconst [comment, setComment] = useState(\"\");\n\n\u003cTextArea\n  label=\"コメント\"\n  disabled={false}\n  required={true}\n  error={false}\n  helperText=\"内容を入力してください\"\n  size=\"medium\"\n  rows={5}\n  value={comment}\n  onChange={(e) =\u003e setComment(e.target.value)}\n/\u003e;\n```\n\n### props\n\n- label\n  - string\n- disabled\n  - boolean\n- required\n  - boolean\n- error\n  - boolean\n- helperText\n  - string\n- size\n  - \"medium\"\n- rows\n  - number\n- value\n  - string\n- onChange\n  - ChangeEventHandler\u003cHTMLTextAreaElement\u003e\n\n\u003e 複数行入力用コンポーネント。  \n\u003e `rows` を変更することで表示行数を調整できます。\n\n---\n\n## Checkbox\n\n```tsx\nconst [checked, setChecked] = useState(false);\n\n\u003cCheckbox\n  checked={checked}\n  disabled={false}\n  label=\"利用規約に同意\"\n  onChange={setChecked}\n/\u003e;\n```\n\n### props\n\n- checked\n  - boolean\n- disabled\n  - boolean\n- label\n  - string\n- onChange\n  - (checked: boolean) =\u003e void\n\n\u003e チェックボックス用コンポーネント。  \n\u003e `checked` と `onChange` を使用することで選択状態を制御できます。\n\n---\n\n## Radio\n\n```tsx\nconst [value, setValue] = useState(\"A\");\n\n\u003cRadio\n  label=\"ひとつ選択してください\"\n  value={value}\n  onChange={setValue}\n  disabled={false}\n  contents={[\n    {\n      label: \"選択肢A\",\n      value: \"A\",\n    },\n    {\n      label: \"選択肢B\",\n      value: \"B\",\n      checked: true,\n    },\n    {\n      label: \"選択肢C\",\n      value: \"C\",\n    },\n  ]}\n/\u003e;\n```\n\n### props\n\n- label\n  - string\n- value\n  - string\n- onChange\n  - (value: string) =\u003e void\n- disabled\n  - boolean\n- contents\n  - RadioObject[]\n\n#### RadioObject\n\n- label\n  - string\n- value\n  - string\n- checked\n  - boolean\n\n\u003e ラジオボタン用コンポーネント。  \n\u003e `contents` に配列形式で選択肢を指定できます。  \n\u003e `value` と `onChange` を使用することで選択状態を制御できます。\n\n---\n\n## Switch\n\n```tsx\nconst [enabled, setEnabled] = useState(false);\n\n\u003cSwitch\n  checked={enabled}\n  onChange={setEnabled}\n  disabled={false}\n  label=\"メール通知を受け取る\"\n/\u003e;\n```\n\n### props\n\n- checked\n  - boolean\n- onChange\n  - (checked: boolean) =\u003e void\n- disabled\n  - boolean\n- label\n  - string\n\n\u003e ON / OFF 状態を切り替えるためのコンポーネント。\n\n---\n\n## Select\n\n```tsx\nconst [category, setCategory] = useState(\"music\");\n\n\u003cSelect\n  label=\"カテゴリー\"\n  value={category}\n  onChange={setCategory}\n  disabled={false}\n  options={[\n    { label: \"音楽\", value: \"music\" },\n    { label: \"映像\", value: \"movie\" },\n    { label: \"イラスト\", value: \"illust\" },\n  ]}\n/\u003e;\n```\n\n### props\n\n- label\n  - string\n- value\n  - string\n- onChange\n  - (value: string) =\u003e void\n- disabled\n  - boolean\n- options\n  - SelectOption[]\n\n#### SelectOption\n\n- label\n  - string\n- value\n  - string\n\n\u003e 選択式入力用コンポーネント。  \n\u003e `options` に配列形式で選択肢を指定できます。  \n\u003e `value` と `onChange` を使用することで、React state による選択状態の制御 (Controlled Component) に対応します。  \n\u003e `disabled` が true の場合、操作できなくなります。\n\n---\n\n# Data Display\n\n## Badge\n\n```tsx\n\u003cBadge label=\"ライブ配信中\" intention=\"primary\" /\u003e\n```\n\n### props\n\n- label\n  - string\n- intention\n  - \"primary\" | \"secondary\" | \"shade\" | \"negative\" | \"notice\"\n\n\u003e ステータス表示用コンポーネント。\n\n---\n\n## Card\n\n```tsx\n\u003cCard\n  image=\"https://picsum.photos/500/500\"\n  title=\"カードタイトル\"\n  detail=\"ここに詳細情報\"\n  meta=\"2026-05-26\"\n/\u003e\n```\n\n### props\n\n- image\n  - string\n- title\n  - string\n- detail\n  - string\n- meta\n  - string\n\n\u003e サムネイル付き情報表示コンポーネント。\n\n---\n\n# Layout\n\n## Container\n\n```tsx\n\u003cContainer maxWidth={1200} fullWidth={false} padding={true}\u003e\n  {props.children}\n\u003c/Container\u003e\n```\n\n### props\n\n- maxWidth\n  - number\n- fullWidth\n  - boolean\n- padding\n  - boolean\n- children\n  - ReactNode\n\n\u003e コンテンツ横幅を制御するためのコンポーネント。\n\n---\n\n## CardContainer\n\n```tsx\n\u003cCardContainer maxWidth={1200} fullWidth={false} padding={true}\u003e\n  \u003cCard /\u003e\n  \u003cCard /\u003e\n\u003c/CardContainer\u003e\n```\n\n### props\n\n- maxWidth\n  - number\n- fullWidth\n  - boolean\n- padding\n  - boolean\n- children\n  - ReactNode\n\n\u003e Card を並べて表示するためのコンテナコンポーネント。  \n\u003e レスポンシブ対応のグリッドレイアウトを提供します。\n\n---\n\n## Spacer\n\n```tsx\n\u003cSpacer size={50} /\u003e\n```\n\n### props\n\n- size\n  - number\n\n\u003e コンポーネント間に余白を作成できます。\n\n---\n\n## Header\n\n```tsx\n\u003cHeader\n  maxWidth={1200}\n  fixed={true}\n  left={\u003cText\u003eLogo\u003c/Text\u003e}\n  center={\u003cText\u003eCenter\u003c/Text\u003e}\n  right={\u003cButton\u003eLogin\u003c/Button\u003e}\n/\u003e\n```\n\n### props\n\n- maxWidth\n  - number\n- fixed\n  - boolean\n- left\n  - ReactNode\n- center\n  - ReactNode\n- right\n  - ReactNode\n\n\u003e ヘッダー表示用コンポーネント。  \n\u003e `fixed` が true の場合、画面上部へ固定表示されます。\n\n---\n\n# Feedback\n\n## Modal\n\n```tsx\nconst [open, setOpen] = useState(false);\n\n\u003cButton onClick={() =\u003e setOpen(true)}\u003e\n  開く\n\u003c/Button\u003e\n\n\u003cModal open={open}\u003e\n  \u003ch2\u003eタイトル\u003c/h2\u003e\n\n  \u003cButton onClick={() =\u003e setOpen(false)}\u003e\n    閉じる\n  \u003c/Button\u003e\n\u003c/Modal\u003e\n```\n\n### props\n\n- open\n  - boolean\n- children\n  - ReactNode\n\n\u003e モーダル表示用コンポーネント。  \n\u003e `open` が true の場合に表示されます。\n\n---\n\n## Menu\n\n```tsx\n\u003cMenu\u003e\n  \u003cButton\u003eHome\u003c/Button\u003e\n  \u003cButton\u003eSearch\u003c/Button\u003e\n\u003c/Menu\u003e\n```\n\n### props\n\n- children\n  - ReactNode\n\n\u003e 展開式メニューコンポーネント。  \n\u003e 画面下部へ固定表示されます。\n\n---\n\n## Loading\n\n```tsx\n\u003cLoading size={100} /\u003e\n```\n\n### props\n\n- size\n  - number\n\n\u003e ローディング表示用コンポーネント。\n\n---\n\n## Tabs\n\n```tsx\n\u003cTabs\n  default=\"home\"\n  tabs={[\n    {\n      value: \"home\",\n      label: \"Home\",\n      component: \u003ch3\u003eHome\u003c/h3\u003e,\n    },\n    {\n      value: \"about\",\n      label: \"About\",\n      component: \u003ch3\u003eAbout\u003c/h3\u003e,\n    },\n    {\n      value: \"work\",\n      label: \"Work\",\n      component: \u003ch3\u003eWork\u003c/h3\u003e,\n    },\n  ]}\n/\u003e\n```\n\n### props\n\n- default\n  - string\n- tabs\n  - TabObject[]\n\n#### TabObject\n\n- value\n  - string\n- label\n  - string\n- component\n  - ReactNode\n\n\u003e タブ切り替え用コンポーネント。  \n\u003e `tabs` に配列形式でタブ情報を指定できます。  \n\u003e `component` に指定した ReactNode が、選択中タブの内容として表示されます。\n\n---\n\n## Upload\n\n```tsx\nconst [thumbnail, setThumbnail] = useState({\n  file: null,\n  preview: \"\",\n});\n\n\u003cUpload\n  value={thumbnail}\n  onChange={setThumbnail}\n/\u003e;\n```\n\n### props\n\n- value\n  - UploadValue\n- onChange\n  - (value: UploadValue) =\u003e void\n\n#### UploadValue\n\n- file\n  - Blob | null\n- preview\n  - string\n\n\u003e 画像アップロード用コンポーネント。  \n\u003e jpg / png 形式の画像をアップロードできます。  \n\u003e ドラッグ＆ドロップ、またはクリックによるファイル選択に対応しています。  \n\u003e アップロード後は画像編集画面が表示され、16:9 の比率でトリミングできます。  \n\u003e 完了時に 1280×720 のサムネイル画像が生成されます。  \n\u003e `value` と `onChange` を使用することで、React state による画像データの制御 (Controlled Component) に対応します。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsomeiro%2Fliminal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsomeiro%2Fliminal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsomeiro%2Fliminal/lists"}