https://github.com/jide/react-querybuilder-shadcn-ui

Custom shadcn/ui components for react-querybuilder
https://github.com/jide/react-querybuilder-shadcn-ui

Last synced: 12 months ago
JSON representation

Custom shadcn/ui components for react-querybuilder

• Host: GitHub
• URL: https://github.com/jide/react-querybuilder-shadcn-ui
• Owner: jide
• Created: 2024-04-23T22:06:48.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-16T14:04:47.000Z (over 1 year ago)
• Last Synced: 2025-03-21T04:51:16.211Z (12 months ago)
• Language: TypeScript
• Size: 350 KB
• Stars: 41
• Watchers: 3
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-shadcnui - Github

README

          
## @react-querybuilder/shadcn-ui

![react-querybuilder-shadcn-ui](./react-querybuilder-shadcn-ui.png)

Unofficial [react-querybuilder](https://npmjs.com/package/react-querybuilder) components for [shadcn/ui](https://ui.shadcn.com).

## Installation

Copy and paste the [src/components/react-querybuilder-shadcn-ui](https://github.com/jide/react-querybuilder-shadcn-ui/tree/main/src/components/react-querybuilder-shadcn-ui) in your project.

## Usage

To render shadcn-ui-compatible components in the query builder, wrap the `` element in ``.

```tsx

import { QueryBuilderShadcnUi } from "@/components/react-querybuilder-shadcn-ui";

import { QueryBuilder, RuleGroupType } from "react-querybuilder";

const fields = [

  { name: "firstName", label: "First Name" },

  { name: "lastName", label: "Last Name" },

];

const App = () => {

  const [query, setQuery] = useState({

    combinator: "and",

    rules: [],

  });

  return (

    

      

    

  );

};

```

## Notes

- Some additional styling may be necessary, see [src/components/react-querybuilder-shadcn-ui/styles.scss](https://github.com/jide/react-querybuilder-shadcn-ui/tree/main/src/components/react-querybuilder-shadcn-ui/styles.scss)