Repository navigation
React 1.1.0
8 new components including a full color system, a prebuilt stylesheet for projects without Tailwind, and an API reference generated from the library types.
Added
- Card - A server-safe layout container with
CardMedia,CardHeader,CardTitle,CardDescriptionandCardFooterslots, an optional solid or glass frame, and an inset mode that floats media into a fully rounded panel. Every corner derives from a single--card-radius, so retuning one value keeps the nest concentric. - Color Picker - A swatch trigger and a popover holding an HSB area, a hue slider and a text input. It shares one color with every color component below it through context, so an area, a slider and a palette need no value wiring.
ColorPickerInputreads any stringparseColoraccepts, not only the format it prints, andColorPickerEyeDroppersamples a screen pixel where the browser has an EyeDropper (rendering nothing where it does not). - Color Area, Color Slider, Color Swatch and Color Swatch Picker - The 4 building blocks behind the picker, each usable on its own: a two-axis HSB plane, a channel slider, a single swatch, and a selectable palette.
- Color model -
parseColor,formatColor,convertColorand the channel helpers ship from@appica/ui-react/color. An alpha format collapses to its opaque twin at full opacity, so a solid color is written#3b82f6rather than#3b82f6ff. - Rating - A
radiogroupof icon buttons that sweeps a fill preview across the row under the pointer and commits on click. The preview always lands on astepboundary, so it never promises a value the click will not deliver. Swap the built-in star throughicon={{ empty, filled }}, and recolor the whole control with anytext-*utility. - Border Beam - A comet of light that laps your content's border, painted as a conic sweep clipped to a hairline ring so it follows the wrapper's own
border-radiusexactly, from arounded-xlcard to a full pill, with no radius prop to keep in sync. Pure CSS, mirrored in RTL and reduced-motion aware. - Carousel thumbnails -
CarouselThumbsis a rail ofCarouselThumbs that sits inside the carousel and drives it, with no second engine to wire up by hand. The rail is a carousel of its own, so a set with more shots than fit scrolls instead of squeezing, and selection is drawn as a single outline that slides between thumbnails. - frame prop on Dialog, AlertDialog and Drawer - Wraps the popup in a translucent glass frame over the backdrop. Pass
frame={false}for a plain solid card. - Prebuilt stylesheet -
@import '@appica/ui-react/css'pulls in a single self-containedappica.csscarrying every component's styles and the full token system, for projects that do not run Tailwind. It is linkable straight from a CDN, and tokens stay overridable CSS variables so theming works the same way. - Agent rules in the package -
@appica/ui-react/agent-rules.mdships the rules a coding agent needs to use the library correctly, so an agent that wandered in following an import finds them without the docs site. The README links it.
Improved
- Prop documentation comes from the source - All 366 props declared on our own types now carry JSDoc, so a component's comments, its IDE hover and the published API reference cannot drift apart.
Badge,Button,AlertandTabsListdeclarevariantandsizeexplicitly, so hovering one shows the union and its default instead of an empty interface body. - Text Animate shimmer - Reworked as a seamless gradient glare that sweeps the whole string as one band, rather than brightening character by character.
- Dependencies - Base UI 1.7, Motion 13, Tailwind CSS 4.3 and TypeScript 6 across the workspace, and the development Node floor moves to 22. React 19 and Tailwind CSS 4 remain the only peer requirements.
Fixed
- Menu padding - Dropdown Menu and Context Menu keep their padding inside the scrollport, so pressing the last item no longer scrolls the list under the pointer.