Free

Input OTP Navigation Menu Video Carousel AI Editor Morphing IconsNew Command Menu Toast Conversation Halftone Dots Sound

Generative UI

Agent MapNew Product CardsNew ComposerNew Image GenerationUpdated WeatherNew ConversionNew Document Agent Streaming Text Inline Citations Code Block

Agents

Trace Waterfall Task List Plan Card Question CardUpdated Reasoning Steps Chat History Message Chat InputUpdated

Content

Table CRM Table Grouped Table Chart Item Avatar Badge Marker Kbd Attachment Image Gallery Lightbox QR Code Advertisement

Feedback

Alert Progress Spinner Skeleton Empty

Form controls

Form Input Input Dissolve Textarea ButtonUpdated Toggle Group Filter Chips Checkbox Radio Group Switch Slider Select Combobox Multi Select CalendarUpdated Seat MapNew Color Palette Color Picker Logo Picker Magnetic Dropzone

Layout

Card Accordion Collapsible Aspect Ratio Logo Carousel Separator Scroll Area Resizable Direction

Navigation

TabsUpdated Breadcrumb Pagination SidebarUpdated Menubar

Overlays

Dialog Sheet Drawer Popover Hover Card Tooltip Dropdown MenuUpdated Context Menu

Inspect

منظر جوي لفلوريانوبوليس: خليج فيروزي ترسو فيه قوارب شراعية بين تلال مكسوة بالغابات والمدينة.

فلوريانوبوليس

سانتا كاتارينا، البرازيل

يقع معظم المدينة على جزيرة يحيط بها نحو أربعين شاطئًا. مياه هادئة وأشجار مانغروف في الشمال، وأمواج أطلسية مفتوحة على طول الساحل الشرقي.

Upgrade to Kobra Pro

Get full access to the library, or take just the component you came for.

Direction

Turns every component right to left.

Re-exports Base UI’s DirectionProvider and useDirection hook, which components here read for arrow keys, swipes and placement.

Install

npx shadcn@latest add @kobra/direction

PropTypeDefault

children

ReactNode

Component content

className

string

Optional CSS classes

Composition

Built on the Base UI Direction Provider primitive.
Takes a fixed set of props rather than native element ones.