React Suite

repository·main·Indexed 27 days ago

A comprehensive suite of high-quality React components for building web applications. Version 6.2.2 includes a wide array of components across categories such as Layout, Form, Data Entry, Data Pickers, and Data Grid. It provides integration guides for Next.js, Vite, and Create React App, as well as official templates for JavaScript and TypeScript. Additionally, it offers an MCP server (@rsuite/mcp) and AI skills to help AI assistants access component props, types, and documentation.

Tokens: 446.3K
Snippets: 918
Records: 1.8K
Agent score: 93%

What's inside rsuite

Overview of rsuite/TextMask
main
The rsuite/TextMask component is a tool for masking input values in React applications. It is based on the react-text-mask library, which has ceased maintenance, and rsuite/TextMask serves as its successor for continued development.
https://github.com/rsuite/rsuite/blob/main/src/MaskedInput/README.md
Use the Divider component
main
The Divider component is used to group content horizontally or vertically. It supports various appearances (solid, dashed, dotted), sizes, colors, and labels.
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/divider/en-US/index.md
Use CheckPicker for multiple data selection
main
The CheckPicker component allows users to select multiple items from a list, with support for grouping, searching, and virtualization. It can be used in both uncontrolled and controlled modes.
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/check-picker/en-US/index.md
Use the Uploader component
main
The Uploader component allows users to upload files via clicking or drag-and-drop. It supports image previews and various display modes such as thumbnails, text descriptions, or single-file avatar uploads. Common use cases include:
- Basic Upload: Automatically uploads files upon selection.
- Picture/Avatar: Displays thumbnails or single images.
- Drag and Drop: Enables dropping files into a designated area.
- Initial File List: Displays existing files with preview and delete capabilities.
- Manual Upload: Allows users to select files first and then trigger the upload manually.
- Controlled Mode: Allows managing the file list via external state.
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/uploader/en-US/index.md
Use the Tree component
main
The <Tree> component is used to display tree-structured data. It supports features such as asynchronous loading of child nodes, drag-and-drop, virtualization for large datasets, searching, and custom node rendering.
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/tree/en-US/index.md
Use SegmentedControl to offer exclusive options
main
The SegmentedControl component allows users to select one option from a set of mutually exclusive choices. It supports different sizes, indicator styles (Pill or Underline), and can be used in both uncontrolled and controlled modes.
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/segmented-control/en-US/index.md
Use the Card component
main
The Card component is a container used to display data in a structured way. It can contain various child components like images, buttons, and text. You can use sub-components <Card.Header>, <Card.Body>, and <Card.Footer> to organize the content within the card.
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/card/en-US/index.md
Use the Filterable Table component
main
The Filterable Table component enhances table data management by allowing users to implement various filtering mechanisms to quickly locate and analyze specific information. It supports basic column filtering, global search filtering, advanced multi-criteria filtering, and custom filter components.
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/table-filterable/en-US/index.md
Use the TagInput component
main
The TagInput component is an enhanced version of the standard Input component that supports inputting and managing tags. It allows users to enter text and convert it into tags based on specific triggers like Enter, Space, or Comma.
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/tag-input/en-US/index.md
Use DateRangePicker to select date and time ranges
main
The DateRangePicker component allows users to quickly enter or pick a range of dates and times. It supports various customizations including date formats, sizes, appearances, and predefined ranges.
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/date-range-picker/en-US/index.md
Use the Textarea component
main
The Textarea component is a flexible multi-line text input. It supports features like automatic height adjustment (autosizing), custom sizing, and various resize modes (none, both, horizontal, or vertical).
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/textarea/en-US/index.md
Use the Pagination component
main
The Pagination component provides paging navigation to help users navigate through long lists of data by switching between pages. It supports various layouts, sizes, and integration with routing libraries.
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/pagination/en-US/index.md