https://github.com/someiro/liminal
宣言型 React UI ライブラリ
https://github.com/someiro/liminal
Last synced: 5 days ago
JSON representation
宣言型 React UI ライブラリ
- Host: GitHub
- URL: https://github.com/someiro/liminal
- Owner: someiro
- Created: 2026-06-07T15:28:58.000Z (8 days ago)
- Default Branch: main
- Last Pushed: 2026-06-09T07:15:12.000Z (6 days ago)
- Last Synced: 2026-06-10T06:48:01.515Z (5 days ago)
- Language: TypeScript
- Homepage:
- Size: 79.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
宣言型 React UI ライブラリ
シンプルな組み立てコンポーネントによって、アプリケーション開発に集中することができます。
---
# Setup
1. このリポジトリをクローンし、プロジェクトの `components` ディレクトリに配置します。
2. アプリケーションのエントリーポイントで `global.css` をインポートします。
```tsx
import "@/components/liminal/global.css";
```
3. 必要なコンポーネントをインポートして使用します。
```tsx
import { Button, Text } from "@/components/liminal";
export default function Page() {
return (
Hello, liminal
);
}
```
---
# General
## Button
```tsx
console.log("click")}
>
Button
```
### props
- disabled
- boolean
- variant
- "outlined" | "filled" | "text"
- size
- "small" | "large"
- intention
- "primary" | "secondary" | "shade" | "negative"
- type
- "button" | "submit" | "reset"
- onClick
- ClickEventHandler
- children
- ReactNode
> ボタン表示用コンポーネント。
> `variant` によって見た目を切り替えることができます。
> `disabled` が true の場合、操作できなくなります。
---
## Text
```tsx
Hello Component00
```
### props
- size
- "xs" | "s" | "r" | "xr" | "l" | "xl"
- weight
- "normal" | "bold"
- children
- ReactNode
> テキスト表示用コンポーネント。
> `size` を変更することで文字サイズを調整できます。
---
# Form
## TextField
```tsx
const [name, setName] = useState("A");
setName(e.target.value)}
/>;
```
### props
- label
- string
- disabled
- boolean
- required
- boolean
- error
- boolean
- helperText
- string
- size
- "medium"
- value
- string
- onChange
- ChangeEventHandler
> テキスト入力用コンポーネント。
> `value` と `onChange` を使用することで、React state によるフォーム制御 (Controlled Component) に対応します。
---
## TextArea
```tsx
const [comment, setComment] = useState("");
setComment(e.target.value)}
/>;
```
### props
- label
- string
- disabled
- boolean
- required
- boolean
- error
- boolean
- helperText
- string
- size
- "medium"
- rows
- number
- value
- string
- onChange
- ChangeEventHandler
> 複数行入力用コンポーネント。
> `rows` を変更することで表示行数を調整できます。
---
## Checkbox
```tsx
const [checked, setChecked] = useState(false);
;
```
### props
- checked
- boolean
- disabled
- boolean
- label
- string
- onChange
- (checked: boolean) => void
> チェックボックス用コンポーネント。
> `checked` と `onChange` を使用することで選択状態を制御できます。
---
## Radio
```tsx
const [value, setValue] = useState("A");
;
```
### props
- label
- string
- value
- string
- onChange
- (value: string) => void
- disabled
- boolean
- contents
- RadioObject[]
#### RadioObject
- label
- string
- value
- string
- checked
- boolean
> ラジオボタン用コンポーネント。
> `contents` に配列形式で選択肢を指定できます。
> `value` と `onChange` を使用することで選択状態を制御できます。
---
## Switch
```tsx
const [enabled, setEnabled] = useState(false);
;
```
### props
- checked
- boolean
- onChange
- (checked: boolean) => void
- disabled
- boolean
- label
- string
> ON / OFF 状態を切り替えるためのコンポーネント。
---
## Select
```tsx
const [category, setCategory] = useState("music");
;
```
### props
- label
- string
- value
- string
- onChange
- (value: string) => void
- disabled
- boolean
- options
- SelectOption[]
#### SelectOption
- label
- string
- value
- string
> 選択式入力用コンポーネント。
> `options` に配列形式で選択肢を指定できます。
> `value` と `onChange` を使用することで、React state による選択状態の制御 (Controlled Component) に対応します。
> `disabled` が true の場合、操作できなくなります。
---
# Data Display
## Badge
```tsx
```
### props
- label
- string
- intention
- "primary" | "secondary" | "shade" | "negative" | "notice"
> ステータス表示用コンポーネント。
---
## Card
```tsx
```
### props
- image
- string
- title
- string
- detail
- string
- meta
- string
> サムネイル付き情報表示コンポーネント。
---
# Layout
## Container
```tsx
{props.children}
```
### props
- maxWidth
- number
- fullWidth
- boolean
- padding
- boolean
- children
- ReactNode
> コンテンツ横幅を制御するためのコンポーネント。
---
## CardContainer
```tsx
```
### props
- maxWidth
- number
- fullWidth
- boolean
- padding
- boolean
- children
- ReactNode
> Card を並べて表示するためのコンテナコンポーネント。
> レスポンシブ対応のグリッドレイアウトを提供します。
---
## Spacer
```tsx
```
### props
- size
- number
> コンポーネント間に余白を作成できます。
---
## Header
```tsx
Logo}
center={Center}
right={Login}
/>
```
### props
- maxWidth
- number
- fixed
- boolean
- left
- ReactNode
- center
- ReactNode
- right
- ReactNode
> ヘッダー表示用コンポーネント。
> `fixed` が true の場合、画面上部へ固定表示されます。
---
# Feedback
## Modal
```tsx
const [open, setOpen] = useState(false);
setOpen(true)}>
開く
タイトル
setOpen(false)}>
閉じる
```
### props
- open
- boolean
- children
- ReactNode
> モーダル表示用コンポーネント。
> `open` が true の場合に表示されます。
---
## Menu
```tsx
Home
Search
```
### props
- children
- ReactNode
> 展開式メニューコンポーネント。
> 画面下部へ固定表示されます。
---
## Loading
```tsx
```
### props
- size
- number
> ローディング表示用コンポーネント。
---
## Tabs
```tsx
Home,
},
{
value: "about",
label: "About",
component:
About
,
},
{
value: "work",
label: "Work",
component: Work
,
},
]}
/>
```
### props
- default
- string
- tabs
- TabObject[]
#### TabObject
- value
- string
- label
- string
- component
- ReactNode
> タブ切り替え用コンポーネント。
> `tabs` に配列形式でタブ情報を指定できます。
> `component` に指定した ReactNode が、選択中タブの内容として表示されます。
---
## Upload
```tsx
const [thumbnail, setThumbnail] = useState({
file: null,
preview: "",
});
;
```
### props
- value
- UploadValue
- onChange
- (value: UploadValue) => void
#### UploadValue
- file
- Blob | null
- preview
- string
> 画像アップロード用コンポーネント。
> jpg / png 形式の画像をアップロードできます。
> ドラッグ＆ドロップ、またはクリックによるファイル選択に対応しています。
> アップロード後は画像編集画面が表示され、16:9 の比率でトリミングできます。
> 完了時に 1280×720 のサムネイル画像が生成されます。
> `value` と `onChange` を使用することで、React state による画像データの制御 (Controlled Component) に対応します。