Oceanic TwilightパレットのUIサンプル

基本的なUI要素

ボタン

タグ

タグ 1タグ 2タグ 3タグ 4タグ 5

アラート

#3b5a8cを使ったアラートメッセージ

#2e4f7aを使ったアラートメッセージ

統計カード

総売上

$15,231.89

先月比 +20.1%

アクティブユーザー

12,234

先週比 +2.3%

コンバージョン率

3.42%

昨日比 +0.5%

フォーム要素

ログインフォーム

設定

通知

メールで通知を受け取る

ダークモード

ダークモードを切り替える

テーブル

ステータスメール金額
成功[email protected]$656.67
成功[email protected]$227.37
成功[email protected]$928.58

カレンダー

2023年6月

日
月
火
水
木
金
土
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

ムーブゴール

1日の活動目標を設定

350