react-querybuilder-shadcn-ui

KO | EN

gitlite — search

#javascript #python #react #golang #go #docker #macos #java #cli #kubernetes #ios #mcp #openai #open-source

react-querybuilder-shadcn-ui

(★ 72)

Custom shadcn/ui components for react-querybuilder

react-querybuilder-shadcn-ui 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## @react-querybuilder/shadcn-ui

![react-querybuilder-shadcn-ui](https://raw.githubusercontent.com/jide/react-querybuilder-shadcn-ui/main/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 `<QueryBuilder />` element in `<QueryBuilderShadcnUi />`.

```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<RuleGroupType>({
    combinator: "and",
    rules: [],
  });

return (
    <QueryBuilderShadcnUi>
      <QueryBuilder fields={fields} query={query} onQueryChange={setQuery} />
    </QueryBuilderShadcnUi>
  );
};
```

## 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)

react-querybuilder-shadcn-ui

react-querybuilder-shadcn-ui 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-querybuilder-shadcn-ui

react-querybuilder-shadcn-ui 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README