<<<<<<< HEAD

=======

next

Solid Primitives is a project dedicated to building high-quality, community-contributed primitives for Solid 2.0. Every utility is thoroughly tested, continuously maintained, and reviewed against a consistent quality bar before it lands in the repository. Our aim is to extend Solid's primary and secondary primitives with a well-rounded set of tertiary primitives. While Solid Primitives isn't officially maintained by the SolidJS Core Team, it's managed by members of the SolidJS core and ecosystem teams. This separation lets the core library iterate independently while keeping Solid Primitives in sync with where Solid is headed.

Visit https://primitives2.solidjs.community for documentation and demos for each primitive.

Solid Primitives wraps client- and server-side functionality in a fully reactive API layer. The more deeply rooted these tertiary primitives become, the more they serve as a foundation within Solid's broader ecosystem. Building on well-tested, widely reused foundations makes the applications built on top of them smaller (through aggregate tree-shaking), more readable (through concise, consistent APIs), and more stable (through managed testing and maintenance).

The next branch and all packages published under the next dist-tag target Solid.js 2.0 (solid-js@^2.0.0-beta.14). Solid 2.0 introduces a new async reactivity model, updated control-flow primitives, and breaking API changes that affect every package in this library.

All packages in this release have been migrated to the new 2.0 APIs and are incompatible with Solid 1.x. If you are still on Solid 1.x, use the latest stable releases from the main branch.

• Async reactivity — primitives that previously returned Resource or used createResource internally now expose plain signal accessors that throw NotReadyError on pending state, integrating with <Loading> and <Errored> boundaries.
• use: directives removed — directive-based APIs (e.g. use:fileUploader) have been replaced with ref callback factories (ref={fileUploader(opts)}).
• isServer import path — moved from solid-js/web to @solidjs/web.
• Split effects — all createEffect calls use the Solid 2.0 two-argument compute/apply form to avoid stale reads.
• Peer dependencies — all packages now require solid-js@^2.0.0-beta.14 and @solidjs/web@^2.0.0-beta.14.

See the CHANGELOG of each individual package for a full list of breaking changes.

Name	Stage	Primitives	Size	NPM	Solid 2
Inputs
a11y		createFormControl createFormControlInput FormControlContext useFormControl makeAnnounce createAnnounce createReducedMotion			✓
active-element		createActiveElement			✓
focus		autofocus createAutofocus createFocusTrap createFocusRestore createFocusGroup makeFocusListener createFocusSignal			✓
input-mask		createInputMask createMaskPattern			✓
keyboard		useKeyDownEvent useKeyDownList useCurrentlyHeldKey useKeyDownSequence createKeyHold createShortcut			✓
list-state		createListState createMultiSelectListState			✓
mouse		createMousePosition createPositionToElement			✓
pointer		createPointerListeners createPerPointerListeners createPointerPosition createPointerList			✓
scroll		createScrollPosition useWindowScrollPosition createPreventScroll			✓
selection		createSelection			✓
Utilities
analytics		makeAnalytics createAnalytics AnalyticsProvider useAnalytics makeAnalyticsGuard createAnalyticsGuard createServerPlugin			✓
controlled-props		createControlledProp			✓
cursor		makeBodyCursor makeElementCursor createBodyCursor createElementCursor createDragCursor cursorRef			✓
date		createDate createDateNow createTimeDifference createTimeDifferenceFromNow createTimeAgo createCountdown createCountdownFromNow			✓
event-bus		createEventBus createEmitter createEventHub createEventStack			✓
event-dispatcher		createEventDispatcher			✓
flux-store		createFluxStore createFluxStoreFactory createActions createAction			✓
history		createUndoHistory			✓
i18n		flatten resolveTemplate resolveRichTemplate richText translator scopedTranslator chainedTranslator			✓
platform		List of variables			✓
promise		promiseTimeout raceTimeout until untilAll untilAny retry changed			✓
props		combineProps combineHandlers filterProps partitionProps			✓
queue		makeQueue createQueue makePriorityQueue createPriorityQueue createTaskQueue createConcurrentTaskQueue			✓
scheduled		debounce throttle scheduleIdle leading createScheduled leadingAndTrailing			✓
script-loader		createScriptLoader			✓
share		createSocialShare createWebShare makeWebShare			✓
Animation
animation		makeAnimate createAnimate makeScrollAnimation createScrollAnimation makeViewAnimation createViewAnimation makeFlip makeStagger createStagger makeAnimationGroup createAnimationGroup makeMotionPath createMotionPath makeSequence createPresenceAnimation			✓
presence		createPresence			✓
raf		createRAF createMs targetFPS			✓
spring		createSpring createDerivedSpring			✓
transition-group		createSwitchTransition createListTransition			✓
tween		createTween			✓
Reactivity
async		fromStream fromJSONStream makeAbortable createAbortable makeRetrying createAggregated			✓
controlled-signal		createControllableSignal createControllableBooleanSignal createControllableArraySignal createControllableSetSignal createToggleState			✓
db-store		createDbStore supabaseAdapter
deep		trackDeep trackStore captureStoreUpdates			✓
destructure		destructure			✓
immutable		createImmutable
lifecycle		createIsMounted isHydrated onElementConnect			✓
map		ReactiveMap ReactiveWeakMap			✓
memo		createLatest createLatestMany createWritableMemo createLazyMemo createPureReaction createMemoCache createReducer			✓
mutable		createMutable modifyMutable			✓
resource		createAggregated createDeepSignal makeAbortable createAbortable makeCache makeRetrying
rootless		createSubRoot createCallback createDisposable createSharedRoot createRootPool			✓
set		ReactiveSet ReactiveWeakSet union intersection difference symmetricDifference readonlySet			✓
signal-builders		push filter sort map get merge update add clamp template			✓
sortable		ascending descending by combine reverse makeSorted createSorted sortedIndex sortedIndexBy insertSorted createSortedIndex createSortedProjection			✓
state-machine		createMachine			✓
static-store		createStaticStore createDerivedStaticStore			✓
trigger		createTrigger createTriggerCache			✓
Display & Media
audio		makeAudio makeAudioPlayer createAudio			✓
bounds		createElementBounds			✓
devices		createDevices createMicrophones createSpeakers createCameras			✓
filesystem		createFileSystem createSyncFileSystem createAsyncFileSystem makeNoFileSystem makeNoAsyncFileSystem makeVirtualFileSystem makeWebAccessFileSystem makeNodeFileSystem makeTauriFileSystem makeChokidarWatcher rsync			✓
idle		createIdleTimer			✓
intersection-observer		createIntersectionObserver createViewportObserver createVisibilityObserver			✓
media		makeMediaQueryListener createMediaQuery createBreakpoints usePrefersDark			✓
page-utilities		createPageVisibility usePageVisibility makePageLeave createPageLeaveBlocker			✓
resize-observer		createResizeObserver createWindowSize createElementSize			✓
styles		createRemSize			✓
video		makeVideo makeVideoPlayer createVideo createVideoPlayer makeVideoFrameCallback createVideoFrameCallback			✓
Browser APIs
broadcast-channel		makeBroadcastChannel createBroadcastChannel			✓
clipboard		copyClipboard writeClipboard createClipboard			✓
event-listener		createEventListener createEventSignal createEventListenerMap WindowEventListener DocumentEventListener			✓
event-props		createEventProps			✓
favicon		makeFavicon createFavicon makeFaviconAnimation createFaviconAnimation makeFaviconBadge createFaviconBadge makeFaviconScheme createFaviconScheme makeFaviconProgress createFaviconProgress FaviconLink			✓
fullscreen		makeFullscreen createFullscreen fullscreen			✓
geolocation		makeGeolocation makeGeolocationWatcher createGeolocation createGeolocationWatcher createDistance createWithinRadius			✓
interaction		makeInteractOutside interactOutside createInteractOutside ariaHideOutside createHideOutside			✓
mediastream		createStream createAmplitudeStream createAmplitudeFromStream createMediaPermissionRequest createScreen			✓
mutation-observer		createMutationObserver			✓
notification		isNotificationSupported makeNotification createNotification createNotificationPermission			✓
permission		createPermission			✓
storage		makePersisted cookieStorage tauriStorage multiplexStorage storageSync messageSync wsSync multiplexSync addClearMethod addWithOptionsMethod makeObjectStorage			✓
timer		makeTimer createTimer createTimeoutLoop createPolled createIntervalCounter			✓
upload		createFilePicker createDropzone dropzone createFileUploader fileSender fileUploader			✓
url		createLocationState useSharedLocationState updateLocation setLocationFallback createURL createURLRecord ReactiveURL createSearchParams createLocationSearchParams useSharedLocationSearchParams getSearchParamsRecord ReactiveSearchParams			✓
workers		createWorker createWorkerPool createWorkerQuery createReactiveWorker workerScope			✓
Network
connectivity		createConnectivitySignal			✓
cookies		createServerCookie createUserTheme getCookiesString			✓
fetch		createFetch
graphql		createGraphQLClient
sse		makeSSE createSSE makeSSEWorker			✓
websocket		makeWS createWS createWSState createWSMessage makeReconnectingWS createReconnectingWS makeHeartbeatWS wsMessageIterable createWSData createWSStore			✓
Control Flow
context		createContextProvider createOptionalContextProvider createLayeredContext MultiProvider			✓
jsx-tokenizer		createTokenizer createToken resolveTokens isToken			✓
keyed		keyArray Key Entries MapEntries SetValues			✓
list		listArray List			✓
match		MatchTag MatchValue			✓
range		createNumericRange repeat mapRange indexRange Repeat IndexRange			✓
refs		mergeRefs resolveElements resolveFirst Ref Refs			✓
UI Patterns
drag-drop		makeDraggable makeDroppable makeNativeDroppable createDraggable createDroppable createNativeDroppable createSortable createDragContext closestCenter closestCorners rectIntersection pointerWithin			✓
form		createForm toFormData createFormResetListener createFormControl createFormControlInput FormControlContext useFormControl			✓
marker		createMarker			✓
masonry		createMasonry			✓
pagination		createPagination createSegment createInfiniteScroll			✓
virtual		createVirutalList VirtualList			✓
Sensors
orientation		makeOrientation createOrientation			✓
sensors		makeAccelerometer createAccelerometer makeGyroscope createGyroscope makeSensor createSensor makeCompass createCompass makeBattery createBattery			✓
vibrate		isVibrationSupported makeVibrate createVibrate frequencyToPattern makePulse createPulse			✓

The @solid-primitives/utils package provides shared helpers used across the library.

Each package exposes its raw TypeScript source via a custom @solid-primitives/source export condition. This lets tests, the playground, and cross-package imports inside the monorepo resolve directly to .ts files without a build step, while external consumers always receive the compiled dist/ output.

See EXPORTS.md for a full explanation of how this works and why we use it.

Contributions are what make this project possible. Solid Primitives welcomes pull requests, bug reports, and feature proposals from the community.

Please read CONTRIBUTING.md for details on the submission process, coding standards, and the stage-based review pipeline all new primitives go through before acceptance.

If you discover a security vulnerability, please follow the process outlined in SECURITY.md rather than opening a public issue.

Solid Primitives is released under the MIT License. Copyright © 2021 Solid Core Team.

Each package is independently licensed — see the LICENSE file within any package directory for its specific terms.

Solid Primitives is owned and maintained by the Solid Primitives Working Group — a group of volunteers drawn from the Solid core and ecosystem teams. While not an officially supported product of the Solid Core Team, the working group coordinates directly with core maintainers to ensure primitives remain aligned with the direction of the framework.

Decisions about new packages, stage promotions, and breaking changes are made collaboratively by working group members. To get involved or follow along, join the SolidJS Discord (#solid-primitives channel) or open a discussion in this repository.

Built with ❤️ by the Solid Community