DOCSEARCHbyAlgolia
Submit Docs

React Creme UI Component Library

website·Indexed 29 days ago

https://react-creme.vercel.app

A lightweight, modern UI library featuring 57 production-ready components with React 19 support. Includes a wide range of elements such as accordions, carousels, dropdowns, and notifications, with built-in RTL support, custom sizing, and full ESM build.

Tokens
6K
Snippets
26
Records
136
Agent score
75%

What's inside React Creme

  2. Implement basic text inputs with React Creme

    React Creme provides a flexible text input component that supports various visual styles and configurations, including custom sizes, Right-to-Left (RTL) support, leading icons, and options for flat or rounded corners.

  3. Implement a Docked Drawer in React Creme

    The Drawer component in React Creme supports four docking positions: Right, Left, Top, and Bottom. It features adjustable dimensions and supports custom transitions for opening and closing the drawer.

  4. Implement Scroll Spy navigation

    The Scroll Spy feature provides navigation links that automatically track the user's scroll position and allow clicking to jump to specific sections of a container. It supports both left-aligned and right-aligned link configurations and includes RTL (Right-to-Left) support and smart tracking.

  5. Implement a Tree component with selection mode

    The Tree component supports a selection mode where individual nodes and their associated children can be selected using checkboxes. It supports both single and multi-selection configurations and allows for custom sizing of the tree elements.

  6. Implement a basic Progress bar in react-creme

    The Progress component provides a visual indicator of task completion. It supports custom sizes and can be configured as either determinate (showing a specific percentage) or indeterminate (showing a continuous animation for long-running operations).

  7. Use the FormField component for basic input

    The FormField component provides a standardized input field with support for custom sizes, RTL (Right-to-Left) rendering, label icons, and a disabled state.

  8. Use the Button component in React Creme

    The Button component supports various configurations for sizing, states, and icons to handle different user interactions and visual requirements.

  9. Position elements relative to a container using usePosition

    The usePosition hook allows for easy positioning of an element relative to a container element. It supports 12 specific position presets: top left, top right, top center, bottom center, bottom left, bottom right, left center, left top, left bottom, right top, right bottom, and right center.

  10. Use Vertical mode in Splitter to create stacked panels

    Vertical mode splits the container vertically, providing a drag handle that allows users to resize and control the height of the top and bottom panels.

  11. Compare two images side by side horizontally

    Use the Image Comparer component in horizontal layout to allow users to compare two images side by side. A drag handle is provided to guide the user to the correct position for comparison.