@enact-ui/docs-ui

Documentation UI components for ENACT UI. A collection of reusable components for building documentation websites.

Installation

``bash
bun add @enact-ui/docs-ui
`

Peer Dependencies

This package requires the following peer dependencies:

- react (^18.0.0 || ^19.0.0)
- react-dom (^18.0.0 || ^19.0.0)
- @enact-ui/react (*)

Components

$3

- CodeBlock - Code display with copy button
- CodeTabs - Tab system for code snippets (CLI vs Manual, etc.)
- Steps - Step-by-step instruction lists
- PageMetadata - Page description display
- StoryDemo - Component demo wrapper with code preview

$3

- CollapsibleCode - Expandable source code display with blur effect
- LinksDropdown - Dropdown menu with links (source, storybook, API)
- PageHeader - Page title with customizable actions slot
- DocSearch - Modal search interface with keyboard shortcuts
- Toc - Table of Contents with automatic heading extraction
- PaginationArrows - Compact prev/next navigation arrows
- PaginationFooter - Card-style prev/next navigation
- CopyContentButton - Copy button with dropdown menu

$3

All icons used by components are exported and can be reused:

`tsx
import { CopyIcon, CheckIcon, SearchIcon, ChevronLeftIcon } from '@enact-ui/docs-ui';
`

Usage

`tsx
import { CodeBlock, Steps, Step, DocSearch } from '@enact-ui/docs-ui';

// CodeBlock with copy functionality

{const Button = () => Click me}


// Step-by-step instructions

Install the package
Import the component
Use in your app


// Search with custom search function
onSearch={(query) => searchIndex.filter(item =>
item.title.includes(query)
)}
onSelect={(result) => navigate(result.path)}
/>
``

License

MIT