{"id":14265449,"url":"https://github.com/ferdiunal/refine-shadcn","last_synced_at":"2025-04-05T20:05:24.526Z","repository":{"id":253097125,"uuid":"842450344","full_name":"ferdiunal/refine-shadcn","owner":"ferdiunal","description":" This package provides theme integration using shadcn-ui for refine.dev","archived":false,"fork":false,"pushed_at":"2024-10-02T19:57:39.000Z","size":2113,"stargazers_count":70,"open_issues_count":0,"forks_count":7,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-29T19:05:12.289Z","etag":null,"topics":["admin-dashboard","admin-panel","admin-template","nextjs","radix-ui","react","refinedev","shadcn-ui","tailwindcss","vite"],"latest_commit_sha":null,"homepage":"https://ferdiunal.tech","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ferdiunal.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["ferdiunal"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2024-08-14T11:29:16.000Z","updated_at":"2025-03-27T05:18:44.000Z","dependencies_parsed_at":"2024-08-14T13:02:13.243Z","dependency_job_id":"f139a311-44f2-42d6-9552-c3391d8f50f9","html_url":"https://github.com/ferdiunal/refine-shadcn","commit_stats":null,"previous_names":["ferdiunal/refine-admin"],"tags_count":9,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferdiunal%2Frefine-shadcn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferdiunal%2Frefine-shadcn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferdiunal%2Frefine-shadcn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferdiunal%2Frefine-shadcn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ferdiunal","download_url":"https://codeload.github.com/ferdiunal/refine-shadcn/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393568,"owners_count":20931812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin-dashboard","admin-panel","admin-template","nextjs","radix-ui","react","refinedev","shadcn-ui","tailwindcss","vite"],"created_at":"2024-08-22T15:01:36.037Z","updated_at":"2025-04-05T20:05:24.506Z","avatar_url":"https://github.com/ferdiunal.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ferdiunal"],"categories":["Packages","TypeScript","Themes \u0026 Customizations"],"sub_categories":["UI Frameworks"],"readme":"# refine-shadcn\n\nThis package is a theme integration for [refine.dev](https://refine.dev) built using [ui.shadcn](ui.shadcn.com).\n\n# Previews 💪\n\n### [Vite Example](https://refine-shadcn-vite.vercel.app)\n### [Nextjs Example](https://refine-shadcn-nextjs.vercel.app)\n\n\n## Install\n\n```bash\n\nnpm install @ferdiunal/refine-shadcn\n\n```\nor\n```bash\n\nyarn add @ferdiunal/refine-shadcn\n\n```\n\n## Useage\n\n**For Vite**\n\n[You can use the layout structure prepared for Vite.js from this link](templates/vite-react/src/App.tsx)\n\n**For NexJs**\n\n[You can use the layout structure prepared for Next.js from this link](templates/nextjs/app/app-layout.tsx)\n\n### List Page\n\nThe List Page displays a table or a grid of records fetched from a data source. It typically includes features like filtering, sorting, bulk actions, and pagination to help users navigate through large sets of data efficiently.\n\n\u003cdetails\u003e\n  \u003csummary\u003eCode Example\u003c/summary\u003e\n\n```tsx\nimport { ListPage, Table, TableFilterProps } from \"@ferdiunal/refine-shadcn\";\nimport { AvatarImage } from \"@radix-ui/react-avatar\";\nimport { BaseRecord, HttpError, useUserFriendlyName } from \"@refinedev/core\";\nimport type { UseTableReturnType } from \"@refinedev/react-table\";\nimport { Edit, Eye, Trash2 } from \"lucide-react\";\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\n\nconst UserList = () =\u003e {\n    const friendly = useUserFriendlyName();\n    const bulkDeleteAction = (\n        table: UseTableReturnType\u003cBaseRecord, HttpError\u003e,\n    ) =\u003e {\n        const label = `Delete Selected (${\n            table.getSelectedRowModel().rows.length\n        }) ${friendly(\n            \"Row\",\n            table.getSelectedRowModel().rows.length \u003e 1 ? \"plural\" : \"singular\",\n        )}`;\n\n        return {\n            label,\n            onClick: () =\u003e {\n                alert(\"Delete Selected\");\n            },\n        };\n    };\n    return (\n        \u003cListPage\u003e\n            \u003cTable enableSorting enableFilters\u003e\n                \u003cTable.Column\n                    accessorKey=\"id\"\n                    id={\"select\"}\n                    header={({ table }) =\u003e (\n                        \u003cTable.CheckAll\n                            options={[bulkDeleteAction(table)]}\n                            table={table}\n                        /\u003e\n                    )}\n                    cell={({ row }) =\u003e (\n                        \u003cCheckbox\n                            className=\"translate-y-[2px]\"\n                            checked={row.getIsSelected()}\n                            onCheckedChange={(value) =\u003e\n                                row.toggleSelected(!!value)\n                            }\n                            aria-label=\"Select row\"\n                            key={`checkbox-${row.original.id}`}\n                        /\u003e\n                    )}\n                /\u003e\n                \u003cTable.Column\n                    header={\"ID\"}\n                    id=\"id\"\n                    accessorKey=\"id\"\n                    enableSorting\n                    enableHiding\n                /\u003e\n                \u003cTable.Column\n                    header={\"Avatar\"}\n                    id=\"avatar\"\n                    accessorKey=\"avatar\"\n                    cell={({ row }) =\u003e\n                        row.original.avatar?.[0]?.url \u0026\u0026 (\n                            \u003cAvatar\u003e\n                                \u003cAvatarImage\n                                    src={row.original.avatar[0].url}\n                                    alt={row.original.avatar[0].name}\n                                /\u003e\n                                \u003cAvatarFallback\u003e\n                                    {row.original.firstName[0]}\n                                    {row.original.lastName[0]}\n                                \u003c/AvatarFallback\u003e\n                            \u003c/Avatar\u003e\n                        )\n                    }\n                /\u003e\n                \u003cTable.Column\n                    header={\"First Name\"}\n                    accessorKey=\"firstName\"\n                    id=\"firstName\"\n                    enableSorting\n                    enableHiding\n                /\u003e\n                \u003cTable.Column\n                    header={\"Last Name\"}\n                    accessorKey=\"lastName\"\n                    id=\"lastName\"\n                    enableSorting\n                    enableHiding\n                /\u003e\n                \u003cTable.Column\n                    header={\"Birthday\"}\n                    accessorKey=\"birthday\"\n                    id=\"birthday\"\n                    enableSorting\n                    enableHiding\n                    filter={(props: TableFilterProps) =\u003e (\n                        \u003cTable.Filter.DateRangePicker {...props} align=\"end\" /\u003e\n                    )}\n                /\u003e\n                \u003cTable.Column\n                    accessorKey={\"id\"}\n                    id={\"actions\"}\n                    cell={({ row: { original } }) =\u003e (\n                        \u003cTable.Actions\u003e\n                            \u003cTable.ShowAction\n                                title=\"Detail\"\n                                row={original}\n                                resource=\"users\"\n                                icon={\u003cEye size={16} /\u003e}\n                            /\u003e\n                            \u003cTable.EditAction\n                                title=\"Edit\"\n                                row={original}\n                                resource=\"users\"\n                                icon={\u003cEdit size={16} /\u003e}\n                            /\u003e\n                            \u003cTable.DeleteAction\n                                title=\"Delete\"\n                                row={original}\n                                withForceDelete={true}\n                                resource=\"users\"\n                                icon={\u003cTrash2 size={16} /\u003e}\n                            /\u003e\n                        \u003c/Table.Actions\u003e\n                    )}\n                /\u003e\n            \u003c/Table\u003e\n        \u003c/ListPage\u003e\n    );\n};\n\nexport default UserList;\n```\n\u003c/details\u003e\n\n### Show Page\nThe Show Page is designed to display detailed information about a single record. It is a read-only view that presents the data in a structured format, often including related records and metadata to give users a comprehensive understanding of the selected item.\n\n\u003cdetails\u003e\n  \u003csummary\u003eCode Example\u003c/summary\u003e\n\n```tsx\nimport { ShowPage } from \"@ferdiunal/refine-shadcn\";\nimport { IResourceComponentsProps, useShow } from \"@refinedev/core\";\nimport { IUser } from \"./Form\";\nconst UserShow: React.FC\u003cIResourceComponentsProps\u003e = () =\u003e {\n    const {\n        query: { data },\n    } = useShow\u003cIUser\u003e();\n    const record = data?.data;\n\n    return (\n        \u003cShowPage\u003e\n            \u003cShowPage.Row title=\"ID\" children={record?.id as number} /\u003e\n            \u003cShowPage.Row\n                title=\"First Name\"\n                children={record?.firstName?.toString() || \"\"}\n            /\u003e\n            \u003cShowPage.Row\n                title=\"Last Name\"\n                children={record?.firstName?.toString() || \"\"}\n            /\u003e\n            \u003cShowPage.Row\n                title=\"Email\"\n                children={record?.email?.toString() || \"\"}\n            /\u003e\n        \u003c/ShowPage\u003e\n    );\n};\n\nexport default UserShow;\n```\n\u003c/details\u003e\n\n### Create Page\nThe Create Page allows users to input new data into the system. It provides a form where users can fill out the necessary fields to create a new record, ensuring that all required information is collected before submission.\n\n\u003cdetails\u003e\n  \u003csummary\u003eCode Example\u003c/summary\u003e\n\n```tsx\nimport { CreatePage } from \"@ferdiunal/refine-shadcn\";\nimport { Field, Form } from \"@ferdiunal/refine-shadcn\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { RedirectAction } from \"@refinedev/core\";\nimport { useForm } from \"@refinedev/react-hook-form\";\nimport * as z from \"zod\";\nimport { Input } from \"@/components/ui/input\";\n\nexport interface IUser {\n    id: number;\n    firstName: string;\n    lastName: string;\n    email: string;\n}\n\nconst formSchema = z.object({\n    firstName: z.string().min(2, {\n        message: \"Firstname must be at least 2 characters.\",\n    }),\n    lastName: z.string().min(2, {\n        message: \"Lastname must be at least 2 characters.\",\n    }),\n    email: z.string().email({\n        message: \"Please enter a valid email address.\",\n    }),\n});\n\nconst UserCreate = () =\u003e {\n    const { ...form } = useForm\u003cz.infer\u003ctypeof formSchema\u003e\u003e({\n        mode: \"all\",\n        resolver: zodResolver(formSchema),\n        defaultValues: {\n            firstName: \"\",\n            lastName: \"\",\n            email: \"\",\n        },\n        refineCoreProps: {\n            autoSave: {\n                enabled: true,\n            },\n            redirect,\n        },\n        warnWhenUnsavedChanges: true,\n    });\n\n    return (\n        \u003cCreatePage\u003e\n            \u003cForm {...form}\u003e\n                \u003cField {...form} name=\"firstName\" label=\"Firstname\"\u003e\n                    \u003cInput placeholder=\"Firstname\" /\u003e\n                \u003c/Field\u003e\n                \u003cField {...form} name=\"lastName\" label=\"Lastname\"\u003e\n                    \u003cInput placeholder=\"Lastname\" /\u003e\n                \u003c/Field\u003e\n                \u003cField {...form} name=\"email\" label=\"Email\"\u003e\n                    \u003cInput placeholder=\"email\" type=\"email\" /\u003e\n                \u003c/Field\u003e\n            \u003c/Form\u003e\n        \u003c/CreatePage\u003e\n    );\n};\n\nexport default UserCreate;\n```\n\u003c/details\u003e\n\n### Edit Page\nThe Edit Page enables users to modify existing records. It loads the current data into a form, allowing users to make updates and save changes. It usually includes validation to ensure that updates do not violate any data integrity rules.\n\n\u003cdetails\u003e\n  \u003csummary\u003eCode Example\u003c/summary\u003e\n\n```tsx\nimport { EditPage } from \"@ferdiunal/refine-shadcn\";\nimport { Field, Form } from \"@ferdiunal/refine-shadcn\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { RedirectAction } from \"@refinedev/core\";\nimport { useForm } from \"@refinedev/react-hook-form\";\nimport * as z from \"zod\";\nimport { Input } from \"@/components/ui/input\";\n\nexport interface IUser {\n    id: number;\n    firstName: string;\n    lastName: string;\n    email: string;\n}\n\nconst formSchema = z.object({\n    firstName: z.string().min(2, {\n        message: \"Firstname must be at least 2 characters.\",\n    }),\n    lastName: z.string().min(2, {\n        message: \"Lastname must be at least 2 characters.\",\n    }),\n    email: z.string().email({\n        message: \"Please enter a valid email address.\",\n    }),\n});\n\nconst UserEdit = () =\u003e {\n    const { ...form } = useForm\u003cz.infer\u003ctypeof formSchema\u003e\u003e({\n        mode: \"all\",\n        resolver: zodResolver(formSchema),\n        defaultValues: {\n            firstName: \"\",\n            lastName: \"\",\n            email: \"\",\n        },\n        refineCoreProps: {\n            autoSave: {\n                enabled: true,\n            },\n            redirect,\n        },\n        warnWhenUnsavedChanges: true,\n    });\n\n    return (\n        \u003cEditPage\u003e\n            \u003cForm {...form}\u003e\n                \u003cField {...form} name=\"firstName\" label=\"Firstname\"\u003e\n                    \u003cInput placeholder=\"Firstname\" /\u003e\n                \u003c/Field\u003e\n                \u003cField {...form} name=\"lastName\" label=\"Lastname\"\u003e\n                    \u003cInput placeholder=\"Lastname\" /\u003e\n                \u003c/Field\u003e\n                \u003cField {...form} name=\"email\" label=\"Email\"\u003e\n                    \u003cInput placeholder=\"email\" type=\"email\" /\u003e\n                \u003c/Field\u003e\n            \u003c/Form\u003e\n        \u003c/EditPage\u003e\n    );\n};\n\nexport default UserEdit;\n```\n\u003c/details\u003e\n\n## Screenshots\n\n\u003cimg src=\"https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-ddjg.png?v=1\" /\u003e\n\n\u003cimg src=\"https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-ddlx.png?v=1\" /\u003e\n\n\u003cimg src=\"https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-ddns.png?v=1\" /\u003e\n\n\u003cimg src=\"https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-ddpm.png?v=1\" /\u003e\n\n\u003cimg src=\"https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-ddrb.png?v=1\" /\u003e\n\n\u003cimg src=\"https://github.com/ferdiunal/refine-shadcn/blob/main/art/SCR-20240821-dfrd.png?v=1\" /\u003e\n\n# Sponsors\n\n[\u003cimg src=\"https://avatars.githubusercontent.com/u/104967037?s=200\u0026v=4\" width=\"100\"\u003e](https://github.com/refinedev)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferdiunal%2Frefine-shadcn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fferdiunal%2Frefine-shadcn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferdiunal%2Frefine-shadcn/lists"}