• Docs
  • Components
  • Blocks
  • Admin
CtrlK
Get Started
  • Introduction
  • Setup
  • CLI
  • VS Code Extension
  • Figma Code Connect
  • MCP Server
  • llms.txt
  • Changelog
Foundations
  • Design Tokens
  • Theming & Modes
  • Semantic Colors
  • Spacing
  • Typography
Testing
  • Test Guide
  • Performance Tests
  • Visual Regression
Components
  • Accordion
  • Activity Feed
  • Alert
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Card
  • Carousel
  • Checkbox
  • Collapsible
  • Combobox
  • Command Palette
  • Context Menu
  • Date Picker
  • Dialog
  • Dropdown Menu
  • File Upload
  • Hover Card
  • Input
  • Kbd
  • Label
  • Menubar
  • Metric Card
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Quick Actions
  • Radio
  • Rating
  • Resizable
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Skeleton
  • Slider
  • Spinner
  • Split Button
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree View
Blocks
  • Activity Feed
  • App Shell
  • Authentication Block
  • Benefits Section
  • Cta Section
  • Data Table
  • Empty State
  • Faq Section
  • Feature Grid Section
  • Footer Section
  • Hero Section
  • Kpi Dashboard
  • Kpi Strip
  • Link Card
  • Metric Card
  • Navigation Header
  • Pagination Footer
  • Pricing Table
  • Quick Actions
  • Settings Screen
Resources
  • API Reference
API ReferenceChangelog

Component Examples Library

Real-world examples and patterns showing how to use Fragment UI components together to build complete features.

Forms & Inputs

Complete form patterns, validation, and field arrays

  • Registration Form
  • Profile Settings
  • Multi-step Form
  • Field Arrays

Data Display

Tables, lists, and data visualization patterns

  • Data Table with Actions
  • Sortable List
  • Virtual Scrolling
  • Card Grid

Navigation

Menus, tabs, breadcrumbs, and navigation patterns

  • Dashboard Navigation
  • Settings Menu
  • Tabbed Interface
  • Breadcrumb Navigation

Overlays & Modals

Dialogs, sheets, popovers, and overlay patterns

  • Confirmation Dialog
  • Form in Dialog
  • Side Panel
  • Nested Dialogs

Feedback & Status

Toasts, alerts, progress indicators, and status messages

  • Toast Notifications
  • Form Validation
  • Loading States
  • Error Handling

Layout & Composition

Page layouts, dashboard patterns, and composition examples

  • Dashboard Layout
  • Settings Page
  • Authentication Flow
  • Responsive Layout

Full Applications

Complete example applications ready to use

  • Next.js Dashboard ↗
  • SaaS Settings ↗

Best Practices

  • All examples follow accessibility best practices
  • Examples are production-ready and can be copied directly
  • Each example includes code snippets and explanations
  • Examples demonstrate integration patterns between components
API ReferenceChangelog