Orama UI Demo

Headless React Components

Build Beautiful
Smarter Experiences

Unstyled, composable React components with built-in support for AI chat, smart search, and more. Powered by Orama.

View Examples

Modern Search Interface

Clean, minimal design with subtle gradients

Fully accessible
TypeScript support
Zero runtime CSS
Composable architecture

Try these suggestions

Code Examples

Basic Setup

Get started with a simple search interface

import { SearchRoot, SearchInput, SearchResults } from '@orama/ui/components';

export function MySearch() {
return (
  <SearchRoot
    initialState={{
      client: oramaDocsCollection
    }}
  >
    <SearchInput.Wrapper>
      <SearchInput.Input 
        placeholder="Search..."
        className="w-full px-4 py-2 border rounded-lg"
      />
    </SearchInput.Wrapper>
    
    <SearchResults.Wrapper>
      <SearchResults.List>
        {(result) => (
          <SearchResults.Item>
            <h3>{result.title}</h3>
            <p>{result.description}</p>
          </SearchResults.Item>
        )}
      </SearchResults.List>
    </SearchResults.Wrapper>
  </SearchRoot>
);
}