Search view
Search with its results: the field with Back and Clear over a list of people, accounts and activity. A framed panel or dialog on desktop, the whole screen on a phone.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
EnglishMirroredArabic
DesktopMobile
LTR →
Examples
Full screen (mobile)
Before anything is typed, recent searches.
EnglishMirroredArabic
DesktopMobile
LTR →
As a modal
SearchViewDialog: a Search button opens it; Back, Escape or a chosen result closes it. On desktop it docks over anchor (the bar or button that opens it), as Figma's Search view modal does; on a phone it fills the screen.
EnglishMirroredArabic
DesktopMobile
LTR →
Installation
Add the block
npx ritla add search-viewAlso works with shadcn:
npx shadcn@latest add @ritla/search-view
Built from
The Ritla UI components this block is made of. Each is installed with it.
Arabic and RTL notes
Mirrors
- The bar mirrors: Back sits on the right and points right, Clear on the left.
- Each result's avatar or icon moves to the right, its tag to the left.
Does not mirror
- The clear X.
- Numerals
- The result count follows the numerals setting. Amounts and dates in results are your data and show as you pass them.
- Mixed-direction text
- The field takes the direction of what is typed, so a Latin name reads left to right in an Arabic search; titles and descriptions do the same. Wrap phone numbers in
<bdi dir="ltr">. Arabic search finds what people type either way: أحمد and احمد, آمنة and امنه match, and diacritics are ignored.