@enact-ui/docs-ui

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

Installation

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

Basic Components

• 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

Advanced Components

• 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

Icons

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

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

Usage

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

// CodeBlock with copy functionality
<CodeBlock language="tsx" title="Button.tsx">
  {`const Button = () => <button>Click me</button>`}
</CodeBlock>

// Step-by-step instructions
<Steps>
  <Step>Install the package</Step>
  <Step>Import the component</Step>
  <Step>Use in your app</Step>
</Steps>

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

License

MIT