Yukyu Flavor（#002CED）を基調とする
shadcn/ui 互換のコンポーネントライブラリ。
使い方
shadcn CLI を初期化
まず shadcn/ui をプロジェクトに初期化します。
npx shadcn@latest initコンポーネントを追加
必要なコンポーネントを追加します。
npx shadcn@latest add "https://fly-by.design.yukyu.net/r/button.json"コンポーネントを使用
インポートして使用します。
import { Button } from "@/components/ui/button"
<Button>Click me</Button>コンポーネント一覧(63 / 63)
button
Button
Card Title
This is a card component with elevation and border.
card
Card
input
Input
label
Label
textarea
Textarea
Extra Large Text
Large Text
Medium Text (Default)
Small Text
text
Text
Content Above
Content Below
separator
Separator
badge
Badge
spinner
Spinner
skeleton
Skeleton
kbd
Kbd
avatar
Avatar
aspect-ratio
Aspect Ratio
progress
Progress
toggle
Toggle
checkbox
Checkbox
switch
Switch
radio-group
Radio Group
tooltip
Tooltip
Popover content
popover
Popover
Dialog Title
This is a modal dialog example.
dialog
Dialog
Are you sure?
This action cannot be undone.
alert-dialog
Alert Dialog
Sheet Panel
Side panel content goes here.
sheet
Sheet
Bottom Drawer
Swipe or click to dismiss.
drawer
Drawer
dropdown-menu
Dropdown Menu
context-menu
Context Menu
User Name
@username
User bio and details
hover-card
Hover Card
Notification
Your changes have been saved successfully.
toast
Toast
Success
Operation completed
sonner
Sonner
accordion
Accordion
collapsible
Collapsible
tabs
Tabs
toggle-group
Toggle Group
breadcrumb
Breadcrumb
pagination
Pagination
navigation-menu
Navigation Menu
menubar
Menubar
Scrollable content area with custom scrollbar styling.
Lorem ipsum dolor sit amet...
More content here...
scroll-area
Scroll Area
resizable
Resizable
Information
This is an informational alert message.
alert
Alert
select
Select
native-select
Native Select
command
Command
combobox
Combobox
slider
Slider
input-otp
Input OTP
form
Form
This is your public display name.
field
Field
input-group
Input Group
button-group
Button Group
split-button
Split Button
item
Item
| Name | Role |
|---|---|
| John Doe | Admin |
| Jane Smith | User |
table
Table
| Name ↑ | Status |
|---|---|
| John Doe | Active |
data-table
Data Table
calendar
Calendar
date-picker
Date Picker
carousel
Carousel
chart
Chart
No data available
Try adjusting your filters
empty
Empty
Navigation
sidebar
Sidebar
Hello World
Welcome to fly-by design system
hello-world
Hello World
Contact Form
example-form
Example Form
Sign In
example-login
Example Login
デザイン原則
命名規則
- •プレフィックス:
fb- - •プロパティ:
appearance, color, size - •4pxグリッド: すべてのサイズは4pxの倍数