repository·main·Indexed 23 days ago
https://github.com/staticmania/keep-reactAn open-source UI component library built for React and Tailwind CSS. It provides a collection of responsive components including Accordions, Alerts, Avatars, Badges, Breadcrumbs, Buttons, and data visualization charts (AreaChart, BarChart) powered by Recharts. The library is compatible with Vite and Next.js projects and utilizes a keepTheme wrapper for Tailwind CSS configuration.
Badge component in Keep React is used to add visual indicators or labels to highlight specific information or provide additional context. It supports customization for style, size, type, icon, and state.Input component is a fundamental UI element used to collect user data such as text, numbers, dates, or selections. It supports several common patterns including basic fields, labeled fields, icon integration, and disabled states.NumberInput component is a UI element for collecting numeric values (integers or decimals) via keyboard input or increment/decrement buttons. It supports various configurations including labels, helper text, and controlled state management.The Drawer component provides a flexible and customizable way to create drawers that slide in from different directions (left, right, top, or bottom) within a React application. It includes built-in support for:
ESC key closes the drawer)BarChart component provides a visual representation of data through bars of varying lengths. It is highly customizable and supports several patterns including colored bars, colored series, series labels, and stacked bars. For full API details and advanced configurations, refer to the Recharts BarChart documentation.The Dropdown component supports several common UI patterns:
<DropdownItem>.Switch component in this library is built on top of the @radix-ui/react-switch primitive. For low-level behavior and accessibility details, refer to the Radix UI documentation.Tabs component in Keep React allows you to create a tabbed interface to switch between different sections or views within a single container. It works in conjunction with TabsItem components to define the content for each tab.Dropdown component in this library is built on top of the @radix-ui/react-dropdown-menu primitive. For advanced low-level customization or behavior details, refer to the Radix UI documentation.Typography in Keep React is implemented as a reusable className system. It simplifies text styling by providing a consistent way to manage properties such as:
This ensures that text presentation remains uniform across different parts of a web application.
keep-react is built on top of the @radix-ui/react-dialog primitive. It inherits the accessibility and functional behaviors of Radix UI Dialog. For deep customization of the underlying primitives (such as focus management, aria attributes, or interaction patterns), refer to the @radix-ui/react-dialog documentation.