网页
综合
更新时间 2026-11-13 17:16:31
Quick start · Base UI
A quick guide to getting started with Base UI.
Install Base UI using a package manager.
All components are included in a single package. Base UI is tree-shakable, so your app bundle will contain only the components that you actually use.
Base UI uses portals for components that render popups, such as Dialog and Popover. To make portaled components always appear on top of the entire page, add the following style to your application layout root:
This style creates a separate stacking context for your application’s .root element. This way, popups always appear above the page contents, and any z-index property in your styles won’t interfere with them.
Starting with iOS 26, Safari allows content beneath the UI chrome to be visible. Backdrops such as those used by dialogs must use position: absolute instead of position: fixed to cover the entire visual viewport. For this to work after the page is scrolled, the following style must be added to your global styles:
This demo shows you how to import a Popover component, assemble its parts, and apply styles. There are examples for both Tailwind and CSS Modules below, but since Base UI is unstyled, you can use CSS-in-JS, plain CSS, or any other styling solution you prefer.
shadcn/ui is a great place to start if you need pre-styled components with higher-level abstractions. It uses Base UI as its unstyled foundation.
Take a look at the Community page to see more styled libraries powered by Base UI.
For those of you working with LLMs, each docs page has a “View as Markdown” link at the top, which can be shared with AI chat assistants to help them understand Base UI concepts and component APIs.
Additionally, there is an “llms.txt” link in the “Handbook” section of the navigation sidebar, which you can feed to AI chat assistants to help them navigate the docs.
This walkthrough outlines the basics of putting together a Base UI component. Continue to the Handbook section for broader guidance on topics like styling, animation, and composition, or explore the components.
Install Base UI using a package manager.
All components are included in a single package. Base UI is tree-shakable, so your app bundle will contain only the components that you actually use.
Base UI uses portals for components that render popups, such as Dialog and Popover. To make portaled components always appear on top of the entire page, add the following style to your application layout root:
This style creates a separate stacking context for your application’s .root element. This way, popups always appear above the page contents, and any z-index property in your styles won’t interfere with them.
Starting with iOS 26, Safari allows content beneath the UI chrome to be visible. Backdrops such as those used by dialogs must use position: absolute instead of position: fixed to cover the entire visual viewport. For this to work after the page is scrolled, the following style must be added to your global styles:
This demo shows you how to import a Popover component, assemble its parts, and apply styles. There are examples for both Tailwind and CSS Modules below, but since Base UI is unstyled, you can use CSS-in-JS, plain CSS, or any other styling solution you prefer.
shadcn/ui is a great place to start if you need pre-styled components with higher-level abstractions. It uses Base UI as its unstyled foundation.
Take a look at the Community page to see more styled libraries powered by Base UI.
For those of you working with LLMs, each docs page has a “View as Markdown” link at the top, which can be shared with AI chat assistants to help them understand Base UI concepts and component APIs.
Additionally, there is an “llms.txt” link in the “Handbook” section of the navigation sidebar, which you can feed to AI chat assistants to help them navigate the docs.
This walkthrough outlines the basics of putting together a Base UI component. Continue to the Handbook section for broader guidance on topics like styling, animation, and composition, or explore the components.
本页为82搜索生成的网页快照，内容来自站内索引；演示数据的原文链接仅作示例。