Using Subpath Imports
When importing components from @heroui-pro/react, use subpath imports to avoid dependency resolution errors.
Problem
When importing components from the main entry point:
import { AreaChart, ChartTooltip } from "@heroui-pro/react";Vite throws an error, saying it cannot find dependencies like shiki, marked, and react-markdown:
Failed to resolve import "shiki" from "node_modules/.vite/deps/@heroui-pro_react.js"Cause
The main entry point of @heroui-pro/react (dist/index.js) re-exports all components into a single file. When you import from the main entry point, Vite has to resolve the entire bundle, including dependencies of components you never use (shiki belongs to code-block, marked belongs to markdown, and so on).
Solution
Use subpath imports to only bring in the components you need:
// ✅ Correct — subpath import
import { AreaChart } from "@heroui-pro/react/area-chart";
import { ChartTooltip } from "@heroui-pro/react/chart-tooltip";All available subpaths are defined in the package's exports field, in the format @heroui-pro/react/<component-name>, for example:
@heroui-pro/react/area-chart@heroui-pro/react/bar-chart@heroui-pro/react/chart-tooltip@heroui-pro/react/code-block@heroui-pro/react/markdown@heroui-pro/react/sidebar- ……
Subpath List
Below are all currently available subpath imports:
| Subpath | Component |
|---|---|
action-bar | ActionBar |
agenda | Agenda |
app-layout | AppLayout |
area-chart | AreaChart |
bar-chart | BarChart |
carousel | Carousel |
cell-color-picker | CellColorPicker |
cell-select | CellSelect |
cell-slider | CellSlider |
cell-switch | CellSwitch |
chain-of-thought | ChainOfThought |
chart-tooltip | ChartTooltip |
chat-attachment | ChatAttachment |
chat-conversation | ChatConversation |
chat-list-view | ChatListView |
chat-loader | ChatLoader |
chat-message | ChatMessage |
chat-message-actions | ChatMessageActions |
chat-source | ChatSource |
chat-tool | ChatTool |
checkbox-button-group | CheckboxButtonGroup |
code-block | CodeBlock |
command | Command |
composed-chart | ComposedChart |
context-menu | ContextMenu |
data-grid | DataGrid |
drop-zone | DropZone |
emoji-picker | EmojiPicker |
emoji-reaction-button | EmojiReactionButton |
empty-state | EmptyState |
file-tree | FileTree |
floating-toc | FloatingToc |
hover-card | HoverCard |
inline-select | InlineSelect |
item-card | ItemCard |
item-card-group | ItemCardGroup |
kanban | Kanban |
kpi | KPI |
kpi-group | KPIGroup |
line-chart | LineChart |
list-view | ListView |
markdown | Markdown |
native-select | NativeSelect |
navbar | Navbar |
number-stepper | NumberStepper |
number-value | NumberValue |
pie-chart | PieChart |
pressable-feedback | PressableFeedback |
prompt-input | PromptInput |
prompt-suggestion | PromptSuggestion |
radar-chart | RadarChart |
radial-chart | RadialChart |
radio-button-group | RadioButtonGroup |
rating | Rating |
resizable | Resizable |
segment | Segment |
sheet | Sheet |
sidebar | Sidebar |
stepper | Stepper |
text-shimmer | TextShimmer |
trend-chip | TrendChip |
widget | Widget |
How is this guide?
Last updated on