React Querybuilder Shadcn UI

Integrate Shadcn/UI with React QueryBuilder

This project delivers unofficial user interface components specifically crafted to bring the popular shadcn/ui aesthetic to your react-querybuilder implementations. Developers can easily achieve a cohesive and contemporary look by incorporating these components. The primary method involves wrapping your standard QueryBuilder element with the provided QueryBuilderShadcnUi component, alongside copying the necessary source files directly into your project for straightforward integration and potential customization.

Features:

• Shadcn/UI Styling: Offers components that adopt the visual styling and structural conventions of shadcn/ui for use within react-querybuilder.
• Wrapper Component: Includes a `` component that simplifies the application of shadcn/ui themes to your query builder.
• Manual Installation: Components are integrated by copying their source code into your project, providing transparency and direct modification capabilities.
• Base SCSS Styles: Comes with foundational SCSS files for styling, though it's noted that additional custom styling might be necessary for perfect alignment.
• UI Enhancement: Aims to upgrade the visual presentation and overall user experience of react-querybuilder interfaces by leveraging shadcn/ui's design.

Summary:

@react-querybuilder/shadcn-ui provides a practical way for developers to utilize shadcn/ui's design system within react-querybuilder. It supplies unofficial components installable via source code copying and a wrapper for easy application. While it provides a strong starting point for a modern UI, developers should anticipate the possibility of needing to apply further custom styles to fully tailor the appearance to their specific application's requirements and ensure optimal visual consistency.