Components
- Accordion
- Action BarUpdated
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- BadgeUpdated
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- CalendarUpdated
- CardUpdated
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context MenuUpdated
- Data List
- Date Picker
- DialogUpdated
- DrawerUpdated
- Editable
- FieldUpdated
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- MarqueeUpdated
- Menu
- Native Select
- Number InputUpdated
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- TableUpdated
- Tabs
- Textarea
- TimerUpdated
- ToastUpdated
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Hooks
useIsMobile
Reports whether the viewport is below the mobile breakpoint.
useIsMobile tells you if the viewport is less than 768px. It uses matchMedia, so it reacts instantly to browser zoom and device rotation, not just window resizing.
Installation#
pnpm dlx shadcn@latest add @shark/use-is-mobile
Usage#
import { useIsMobile } from "@/registry/react/hooks/use-is-mobile";
Example#
"use client"; import { useIsMobile } from "@/registry/react/hooks/use-is-mobile"; export function Example() { const isMobile = useIsMobile(); return ( <p className="text-muted-foreground text-sm"> {isMobile ? "Mobile layout" : "Desktop layout"} </p> ); }