# Significa Foundations

> Foundations is an opinionated collection of components, patterns, and guidelines for building modern digital products.

Foundations is a React 19 component library built with TypeScript and Tailwind CSS v4. It provides production-ready UI primitives, reusable hooks, utility functions, and higher-level components — designed to be copied into your project and adapted to your needs.

Each page listed includes full documentation and source code.

## introduction

- [About](https://foundations.significa.co/about/llms.txt): Foundations is an opinionated collection of components, patterns, and guidelines for building modern digital products
- [Setup](https://foundations.significa.co/setup/llms.txt): How to setup your project to use Foundations.
- [Changelog](https://foundations.significa.co/changelog/llms.txt): Lastest significant updates and changes to the Significa Foundations library.

## UI

- [Avatar](https://foundations.significa.co/ui/avatar/llms.txt): A visual representation of a user that displays initials when an image is unavailable
- [Badge](https://foundations.significa.co/ui/badge/llms.txt): A Badge component with the possibility of adding an icon and a status
- [Button](https://foundations.significa.co/ui/button/llms.txt): The Button component provides a consistent way to trigger actions across the application.
- [Calendar](https://foundations.significa.co/ui/calendar/llms.txt): A component for selecting a date or date range with month and year navigation controls
- [Checkbox](https://foundations.significa.co/ui/checkbox/llms.txt): A simple native checkbox prepared for indeterminate states
- [Color Picker](https://foundations.significa.co/ui/color-picker/llms.txt): A composable color picker component with modular parts for building custom color selection interfaces.
- [Date Picker](https://foundations.significa.co/ui/date-picker/llms.txt): A date picker component built with the Calendar and Dropdown components.
- [Dialog](https://foundations.significa.co/ui/dialog/llms.txt): Dialog allows you to create modal elements that overlay the main content.
- [Disclosure](https://foundations.significa.co/ui/disclosure/llms.txt): A mostly unstyled vertical set of interactive elements that each reveal a section of content when clicked
- [Divider](https://foundations.significa.co/ui/divider/llms.txt): Dividers are used to visually separate content in a UI.
- [Drawer](https://foundations.significa.co/ui/drawer/llms.txt): A slide-in panel that overlays the main content.
- [Dropdown](https://foundations.significa.co/ui/dropdown/llms.txt): A floating menu that displays a list of options.
- [Input](https://foundations.significa.co/ui/input/llms.txt): A simple text input component.
- [Label](https://foundations.significa.co/ui/label/llms.txt): A simple label component for form fields.
- [Listbox](https://foundations.significa.co/ui/listbox/llms.txt): A control for selecting a value from a list of options.
- [Modal](https://foundations.significa.co/ui/modal/llms.txt): Modal provides an unstyled basis to display content in a layer above the main interface.
- [Popover](https://foundations.significa.co/ui/popover/llms.txt): A floating panel that is attached to a trigger element.
- [Portal](https://foundations.significa.co/ui/portal/llms.txt): A component that renders its children into a new DOM node outside the parent hierarchy.
- [Radio](https://foundations.significa.co/ui/radio/llms.txt): A radio button input component.
- [Select](https://foundations.significa.co/ui/select/llms.txt): A native select component with consistent styling across browsers.
- [Skeleton](https://foundations.significa.co/ui/skeleton/llms.txt): A component to display a replacement for content while loading.
- [Slider](https://foundations.significa.co/ui/slider/llms.txt): A slider component based on the native range input
- [Spinner](https://foundations.significa.co/ui/spinner/llms.txt): A component to display a loading state.
- [Switch](https://foundations.significa.co/ui/switch/llms.txt): A simple switch component on top of the native checkbox.
- [Tabs](https://foundations.significa.co/ui/tabs/llms.txt): A tab navigation component with smooth animations and keyboard support.
- [Textarea](https://foundations.significa.co/ui/textarea/llms.txt): A taller input.
- [Toaster](https://foundations.significa.co/ui/toaster/llms.txt): A component for displaying transient messages to users, such as notifications or alerts.
- [Tooltip](https://foundations.significa.co/ui/tooltip/llms.txt): Tooltips are used to display information on demand.

## components

- [Instance Counter](https://foundations.significa.co/components/instance-counter/llms.txt): A utility component that assigns unique indices to component instances and tracks their total count in the component tree.
- [Marquee](https://foundations.significa.co/components/marquee/llms.txt): A component that displays a continuous stream of content.
- [Sequence](https://foundations.significa.co/components/sequence/llms.txt): A component for creating timed sequences of content with automatic progression.
- [Slot](https://foundations.significa.co/components/slot/llms.txt): A utility component that merges its props onto its immediate child.
- [Stack](https://foundations.significa.co/components/stack/llms.txt): A component for creating scrollable sections with sticky headers, perfect for long-form content and documentation where maintaining context while scrolling is important.

## hooks

- [useDetectDevice](https://foundations.significa.co/hooks/use-detect-device/llms.txt): A hook for detecting the user's device type and platform
- [useElementTransition](https://foundations.significa.co/hooks/use-element-transition/llms.txt): A hook to manage the mounting, unmounting, and transition status of a DOM element with lifecycle-related CSS transitions
- [useIntersectionObserver](https://foundations.significa.co/hooks/use-intersection-observer/llms.txt): A hook for observing the intersection of an element (or array of elements) with the viewport
- [useMatchMedia](https://foundations.significa.co/hooks/use-match-media/llms.txt): A hook that uses the matchMedia API to observe a media query
- [useMousePan](https://foundations.significa.co/hooks/use-mouse-pan/llms.txt): A hook for scrolling elements with a mouse pan gesture
- [usePrefersReducedMotion](https://foundations.significa.co/hooks/use-prefers-reduced-motion/llms.txt): A hook for checking user preference for reduce motion
- [useScrollLock](https://foundations.significa.co/hooks/use-scroll-lock/llms.txt): A hook that allows you to disable scrolling on an HTML element.
- [useStableCallback](https://foundations.significa.co/hooks/use-stable-callback/llms.txt): A hook that provides a stable callback reference for handling unstable function props.
- [useTailwindBreakpoint](https://foundations.significa.co/hooks/use-tailwind-breakpoint/llms.txt): A hook for observing breakpoints using Tailwind CSS breakpoints and custom media queries
- [useTicker](https://foundations.significa.co/hooks/use-ticker/llms.txt): A hook for creating performant paint-dependent loops using requestAnimationFrame with precise timing and delta calculations
- [useTopLayer](https://foundations.significa.co/hooks/use-top-layer/llms.txt): A hook to push an element to the application's Top Layer

## utils

- [Compose Refs](https://foundations.significa.co/utils/compose-refs/llms.txt): Compose multiple refs into a single ref.
- [Debounce](https://foundations.significa.co/utils/debounce/llms.txt): A utility function that limits the rate at which a function can be called by delaying its execution until a specified time has passed since its last invocation.
- [DOM](https://foundations.significa.co/utils/dom/llms.txt): A collection of utility functions for common DOM operations.
- [Math](https://foundations.significa.co/utils/math/llms.txt): A collection of utility functions for common mathematical operations.

## Guides

- [Accessible Forms](https://foundations.significa.co/guides/accessible-forms/llms.txt): How to make it easy to create accessible forms
- [Automated tests](https://foundations.significa.co/guides/automated-tests/llms.txt): How to make it easy to setup automated tests with Playwright
- [Hierarchical Selection](https://foundations.significa.co/guides/hierarchical-selection/llms.txt): Learn how to build hierarchical checkbox selection patterns using foundation components and reusable utilities.
- [Performance tracking & bundle analyzer](https://foundations.significa.co/guides/performance-tracking/llms.txt): A comprehensive guide to setting up performance tracking and bundle analysis for Next.js applications