Overview

Quick start
Accessibility
Releases
Community
About

Handbook

Styling
Animation
Composition
Customization
Forms
TypeScript
llms.txt

Components

AccordionStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Collapsible (Stencil complete).
Alert DialogStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Dialog (Stencil complete). Docs examples use Menu (Stencil complete). Used in docs examples for Dialog (Stencil complete), Drawer (Stencil complete).
AutocompleteStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Combobox (Stencil complete), Field (Stencil complete). Docs examples use Dialog (Stencil complete), Scroll Area (Stencil complete).
AvatarStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Used in docs examples for Popover (Stencil complete).
ButtonStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Used in docs examples for Form (Stencil complete), Toast (Stencil complete).
CheckboxStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Field (Stencil complete), Checkbox Group (Stencil complete). Used in docs examples for Checkbox Group (Stencil complete).
Checkbox GroupStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Field (Stencil complete). Used by the Base UI source of Checkbox (Stencil complete). Docs examples use Checkbox (Stencil complete).
CollapsibleStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Used by the Base UI source of Accordion (Stencil complete).
ComboboxStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), Field (Stencil complete). Used by the Base UI source of Autocomplete (Stencil complete). Docs examples use Dialog (Stencil complete).
Context MenuStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Menu (Stencil complete), Separator (Stencil complete). Used by the Base UI source of Menu (Stencil complete). Docs examples use Menu (Stencil complete).
DialogStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Used by the Base UI source of Alert Dialog (Stencil complete), Drawer (Stencil complete). Docs examples use Alert Dialog (Stencil complete), Field (Stencil complete), Fieldset (Stencil complete), Scroll Area (Stencil complete), Menu (Stencil complete). Used in docs examples for Autocomplete (Stencil complete), Combobox (Stencil complete), Menu (Stencil complete).
DrawerStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Dialog (Stencil complete). Docs examples use Alert Dialog (Stencil complete), Scroll Area (Stencil complete).
FieldStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Fieldset (Stencil complete), Form (Stencil complete). Used by the Base UI source of Autocomplete (Stencil complete), Checkbox (Stencil complete), Checkbox Group (Stencil complete), Combobox (Stencil complete), Input (Stencil complete), Number Field (Stencil complete), OTP Field (Stencil complete), Radio (Stencil complete), Select (Stencil complete), Slider (Stencil complete), Switch (Stencil complete). Used in docs examples for Dialog (Stencil complete), Fieldset (Stencil complete), Form (Stencil complete), Select (Stencil complete).
FieldsetStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Used by the Base UI source of Field (Stencil complete), Radio (Stencil complete). Docs examples use Field (Stencil complete). Used in docs examples for Dialog (Stencil complete).
FormStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Used by the Base UI source of Field (Stencil complete). Docs examples use Field (Stencil complete), Button (Stencil complete).
InputStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Field (Stencil complete).
MenuStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), Context Menu (Stencil complete), Separator (Stencil complete), Toolbar (Stencil complete), Menubar (Stencil complete). Used by the Base UI source of Context Menu (Stencil complete), Menubar (Stencil complete). Docs examples use Dialog (Stencil complete). Used in docs examples for Alert Dialog (Stencil complete), Context Menu (Stencil complete), Dialog (Stencil complete), Menubar (Stencil complete).
MenubarStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), Menu (Stencil complete). Used by the Base UI source of Menu (Stencil complete). Docs examples use Menu (Stencil complete).
MeterStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.
Navigation MenuStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete).
Number FieldStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Field (Stencil complete).
OTP FieldStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), Separator (Stencil complete), Field (Stencil complete).
PopoverStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), Toolbar (Stencil complete). Docs examples use Avatar (Stencil complete).
Preview CardStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete).
ProgressStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.
RadioStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), Field (Stencil complete), Fieldset (Stencil complete).
Scroll AreaStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), CSP Provider (Stencil complete). Used in docs examples for Autocomplete (Stencil complete), Dialog (Stencil complete), Drawer (Stencil complete), CSP Provider (Stencil complete).
SelectStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), CSP Provider (Stencil complete), Field (Stencil complete), Toolbar (Stencil complete). Docs examples use Field (Stencil complete). Used in docs examples for Toolbar (Stencil complete).
SeparatorStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Used by the Base UI source of Context Menu (Stencil complete), Menu (Stencil complete), OTP Field (Stencil complete), Toolbar (Stencil complete).
SliderStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), Field (Stencil complete). Used in docs examples for Direction Provider (Stencil complete).
SwitchStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Field (Stencil complete).
TabsStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), CSP Provider (Stencil complete).
ToastStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete). Docs examples use Button (Stencil complete), Tooltip (Stencil complete).
ToggleStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Toggle Group (Stencil complete), Toolbar (Stencil complete). Used in docs examples for Toggle Group (Stencil complete), Toolbar (Stencil complete).
Toggle GroupStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), Toolbar (Stencil complete). Used by the Base UI source of Toggle (Stencil complete). Docs examples use Toggle (Stencil complete). Used in docs examples for Toolbar (Stencil complete).
ToolbarStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete), Separator (Stencil complete). Used by the Base UI source of Menu (Stencil complete), Popover (Stencil complete), Select (Stencil complete), Toggle (Stencil complete), Toggle Group (Stencil complete). Docs examples use Toggle Group (Stencil complete), Toggle (Stencil complete), Select (Stencil complete).
TooltipStencil ✓: Stencil migration complete.Shadow ✓: Shadow DOM boundary migration complete. Some parts intentionally retain Light DOM.Related: Base UI source uses Direction Provider (Stencil complete). Used in docs examples for Toast (Stencil complete).

Utils

CSP ProviderStencil ✓: Stencil migration complete.Related: Used by the Base UI source of Scroll Area (Stencil complete), Select (Stencil complete), Tabs (Stencil complete). Docs examples use Scroll Area (Stencil complete).
Direction ProviderStencil ✓: Stencil migration complete.Related: Used by the Base UI source of Combobox (Stencil complete), Menu (Stencil complete), Menubar (Stencil complete), Navigation Menu (Stencil complete), OTP Field (Stencil complete), Popover (Stencil complete), Preview Card (Stencil complete), Radio (Stencil complete), Scroll Area (Stencil complete), Select (Stencil complete), Slider (Stencil complete), Tabs (Stencil complete), Toast (Stencil complete), Toggle Group (Stencil complete), Toolbar (Stencil complete), Tooltip (Stencil complete). Docs examples use Slider (Stencil complete).
mergePropsStencil ✓: Stencil migration complete.Related: Used by the Base UI source of useRender (Stencil complete). Docs examples use useRender (Stencil complete).
useRenderStencil ✓: Stencil migration complete.Related: Base UI source uses mergeProps (Stencil complete). Used in docs examples for mergeProps (Stencil complete).

FineSoft GitHub
Base UI npm (upstream)1.8.0

FineSoft Components documentation

An independent Stencil port. This is not the official Base UI website and is not affiliated with or endorsed by the Base UI team. React API text and examples are retained as upstream references; Stencil examples belong to FineSoft.

Use FineSoft with a script tag FineSoft source Official Base UI documentation ↗

v1.0.0-alpha.4

(Top)

v1.0.0-alpha.4

Dec 17, 2024

View as Markdown

Public alpha launch 🐣 Merry Xmas! 🎁