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