Buildit API Reference

• API At a Glance
• Package Entry Points
• Runtime Registration Imports
• Published Component Subpaths
• Root Export Surface
• Component Documentation Index
  • Disclosure
  • Feedback
  • Content
  • Overlay
  • Inputs
  • Layout
• Notes

API At a Glance

Symbol	Purpose	Execution mode	Common gotcha
Custom element subpaths	Register only the components you use	Sync	Import component styles before rendering UI
@vielzeug/buildit/styles	Load shared design tokens and base styles	Sync	Missing base styles causes inconsistent spacing and colors
Component exports	Consume component types and shared symbols	Sync	Prefer documented subpaths over deep internal imports

Package Entry Points

Import	Purpose
@vielzeug/buildit	Registers all published components and re-exports shared symbols/types
@vielzeug/buildit/types	Shared TypeScript types
@vielzeug/buildit/styles	Global tokens and shared component styles
@vielzeug/buildit/styles/styles.css	Explicit base stylesheet path
@vielzeug/buildit/styles/theme.css	Theme token stylesheet
@vielzeug/buildit/styles/animation.css	Animation helpers
@vielzeug/buildit/styles/layers.css	Cascade layer definitions

For headless controller primitives (createListNavigation, createOverlayControl, createSelectionModel), use @vielzeug/craftit/labs.

Runtime Registration Imports

Use side-effect imports to register only the elements you need:

import '@vielzeug/buildit/styles';
import '@vielzeug/buildit/button';
import '@vielzeug/buildit/input';
import '@vielzeug/buildit/dialog';

Or register everything:

import '@vielzeug/buildit/styles';
import '@vielzeug/buildit';

Published Component Subpaths

import '@vielzeug/buildit/accordion';
import '@vielzeug/buildit/accordion-item';
import '@vielzeug/buildit/alert';
import '@vielzeug/buildit/avatar';
import '@vielzeug/buildit/badge';
import '@vielzeug/buildit/box';
import '@vielzeug/buildit/breadcrumb';
import '@vielzeug/buildit/button';
import '@vielzeug/buildit/button-group';
import '@vielzeug/buildit/card';
import '@vielzeug/buildit/checkbox';
import '@vielzeug/buildit/checkbox-group';
import '@vielzeug/buildit/chip';
import '@vielzeug/buildit/combobox';
import '@vielzeug/buildit/dialog';
import '@vielzeug/buildit/drawer';
import '@vielzeug/buildit/file-input';
import '@vielzeug/buildit/form';
import '@vielzeug/buildit/grid';
import '@vielzeug/buildit/grid-item';
import '@vielzeug/buildit/input';
import '@vielzeug/buildit/menu';
import '@vielzeug/buildit/number-input';
import '@vielzeug/buildit/otp-input';
import '@vielzeug/buildit/pagination';
import '@vielzeug/buildit/popover';
import '@vielzeug/buildit/progress';
import '@vielzeug/buildit/radio';
import '@vielzeug/buildit/radio-group';
import '@vielzeug/buildit/rating';
import '@vielzeug/buildit/select';
import '@vielzeug/buildit/separator';
import '@vielzeug/buildit/sidebar';
import '@vielzeug/buildit/skeleton';
import '@vielzeug/buildit/slider';
import '@vielzeug/buildit/switch';
import '@vielzeug/buildit/tab-item';
import '@vielzeug/buildit/tab-panel';
import '@vielzeug/buildit/table';
import '@vielzeug/buildit/tabs';
import '@vielzeug/buildit/text';
import '@vielzeug/buildit/textarea';
import '@vielzeug/buildit/toast';
import '@vielzeug/buildit/tooltip';

Root Export Surface

The package root is a flat named-export surface. It re-exports symbols from the internal content/disclosure/feedback/inputs/layout/overlay/type modules while also registering all published components as a side effect.

Notable root exports include:

• tag constants like BUTTON_TAG, INPUT_TAG, DIALOG_TAG
• context constants like FORM_CTX, TABS_CTX, CHECKBOX_GROUP_CTX
• component prop/event types like BitButtonProps, BitInputEvents
• toast runtime API: toast

Component Documentation Index

Use the following pages as the canonical per-component API source.

Disclosure

• Accordion
• Tabs

Feedback

• Alert
• Badge
• Chip
• Progress
• Skeleton
• Toast

Content

• Avatar
• Breadcrumb
• Card
• Pagination
• Separator
• Table
• Text

Overlay

• Dialog
• Drawer
• Menu
• Popover
• Tooltip

Inputs

• Button (+ Button Group)
• Checkbox (+ Checkbox Group)
• Checkbox Group
• Combobox
• File Input
• Form
• Input
• Number Input
• OTP Input
• Radio (+ Radio Group)
• Radio Group
• Rating
• Select
• Slider
• Switch
• Textarea

Layout

• Box
• Grid (+ Grid Item)
• Sidebar

Notes

• Prefer subpath imports for runtime registration to keep bundles small and registration explicit.
• Import @vielzeug/buildit/styles before component registration.
• Importing @vielzeug/buildit registers every published component; use it when convenience matters more than granular control.
• For attribute/event/CSS variable details, use each component page in this section.