Meta tags:
description= A quick guide to getting started with Base UI.;
keywords= Base UI Quick Start,Install Base UI,Base UI shadcn,Base UI shadcn/ui,React Portal Setup,iOS Safari Backdrop Fix,Popover Assembly Example,llms.txt Link,Getting Started Guide,npm Install,Setup Guide,Installation Guide,Getting Started Tutorial,First Steps,Beginner Guide;
Headings (most frequently used words):
quick, start, install, the, library, set, up, assemble, component, pre, styled, components, working, with, llms, next, steps, portals, ios, 26, safari,
Text of the page (most frequently used words):
popover (20), the (18), base (12), styles (11), #components (9), css (9), you (8), with (8), for (6), and (6), root (6), classname (6), this (5), component (5), llms (5), page (5), start (5), your (5), quick (5), styled (4), index (4), import (4), react (4), styling (3), handbook (3), navigation (3), can (3), them (3), working (3), top (3), pre (3), notifications (3), popup (3), title (3), description (3), are (3), from (3), modules (3), assemble (3), use (3), body (3), position (3), ios (3), safari (3), style (3), portals (3), dialog (3), install (3), field (3), menu (3), section (2), animation (2), composition (2), next (2), steps (2), there (2), link (2), which (2), chat (2), assistants (2), help (2), docs (2), txt (2), those (2), view (2), markdown (2), community (2), uses (2), its (2), unstyled (2), trigger (2), button (2), portal (2), positioner (2), arrow (2), all (2), module (2), stackblitz (2), tsx (2), any (2), such (2), must (2), entire (2), following (2), context (2), application (2), popups (2), always (2), appear (2), contents (2), div (2), layout (2), that (2), add (2), set (2), package (2), pnpm (2), npm (2), library (2), provider (2), toggle (2), group (2), checkbox (2), walkthrough, outlines, basics, putting, together, continue, broader, guidance, topics, like, explore, additionally, sidebar, feed, navigate, each, has, shared, understand, concepts, apis, take, look, see, more, libraries, powered, great, place, need, higher, level, abstractions, foundation, shadcn, show, code, sideoffset, caught, good, job, return, examplepopover, function, default, export, demo, shows, how, parts, apply, examples, both, tailwind, below, but, since, plain, other, solution, prefer, relative, starting, allows, content, beneath, chrome, visible, backdrops, used, dialogs, instead, cover, visual, viewport, work, after, scrolled, added, global, fixed, absolute, creates, separate, stacking, element, way, above, property, won, interfere, isolate, isolation, children, render, make, portaled, included, single, tree, shakable, app, bundle, will, contain, only, actually, bun, yarn, installation, command, using, manager, guide, getting, started, github, userender, mergeprops, direction, csp, utils, tooltip, toolbar, toast, tabs, switch, slider, separator, select, scroll, area, radio, progress, preview, card, otp, new, number, meter, menubar, input, form, fieldset, drawer, combobox, collapsible, avatar, autocomplete, alert, accordion, typescript, forms, customization, about, releases, accessibility, overview, search, skip,
Text of the page (random words):
quick start base ui skip to contents search k navigation overview quick start accessibility releases community about handbook styling animation composition customization forms typescript llms txt components accordion alert dialog autocomplete avatar button checkbox checkbox group collapsible combobox context menu dialog drawer field fieldset form input menu menubar meter navigation menu number field otp field new popover preview card progress radio scroll area select separator slider switch tabs toast toggle toggle group toolbar tooltip utils csp provider direction provider mergeprops userender github npm 1 6 0 quick start top install the library set up portals ios 26 safari assemble a component pre styled components working with llms next steps quick start a quick guide to getting started with base ui view as markdown install the library install base ui using a package manager installation command pnpm npm yarn bun pnpm add base ui react 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 set up portals 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 layout tsx body div classname root children div body styles css root isolation isolate 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 ios 26 safari 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 styles css body position relative assemble a component 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 notifications index tsx index module css css modules stackblitz css modules stackblitz import as react from react import popover from base ui react popover import styles from index module css export default function examplepopover return popover root popover trigger classname styles button notifications popover trigger popover portal popover positioner sideoffset 8 popover popup classname styles popup popover arrow classname styles arrow popover title classname styles title notifications popover title popover description classname styles description you are all caught up good job popover description popover popup popover positioner popover portal popover root show code pre styled components 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 working with llms 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 next steps 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
|
