React Components

Accessible, framework-agnostic React components with built-in CSS, dark mode, and zero required peer dependencies beyond React.

pnpm add @adjanour/react-components

AccordionWithSearch

Searchable accordion navigation menu - type to filter, click to expand.

import { AccordionWithSearch } from '@adjanour/react-components'
import '@adjanour/react-components/accordion.css'

function Sidebar() {
  return <AccordionWithSearch />
}

Breadcrumbs

Navigation breadcrumb trail with aria-current="page" on the last item.

import { Breadcrumbs } from '@adjanour/react-components'
import '@adjanour/react-components/breadcrumbs.css'

<Breadcrumbs
  items={[
    { title: 'Home', path: '/' },
    { title: 'Projects', path: '/projects' },
    { title: 'Active' },
  ]}
/>

CommandPalette

Press Cmd+K / Ctrl+K to open. Arrow keys to navigate, Enter to select.

View full docs →

Tabs

Accessible tabbed interface with keyboard navigation.

import { Tabs } from '@adjanour/react-components'
import '@adjanour/react-components/tabs.css'

<Tabs
  tabs={[
    { label: 'Overview', content: <p>Overview content</p> },
    { label: 'Usage', content: <p>Usage instructions</p> },
  ]}
/>

Lightweight accessible tooltip. Four positions, shows on hover/focus.

import { Tooltip } from '@adjanour/react-components'
import '@adjanour/react-components/tooltip.css'

<Tooltip content="Helpful hint" position="top">
  <button>Hover me</button>
</Tooltip>

SkipLink

Visually hidden skip link for keyboard accessibility.

import { SkipLink } from '@adjanour/react-components'
import '@adjanour/react-components/skip-link.css'

<SkipLink href="#main-content">Skip to content</SkipLink>