\n ![](\"https://raw.githubusercontent.com/huntabyte/shadcn-svelte/main/docs/static/android-chrome-192x192.png\")
\n
\n shadcn-svelte\n
\n\n\n[](https://discord.gg/fdXy3Sk8Gq)\n\n[shadcn-svelte](https://www.shadcn-svelte.com/) is an unofficial community-led [Svelte](https://svelte.dev) port of [shadcn/ui](https://ui.shadcn.com/).\n\n> **Note****We are not affiliated with shadcn, but we did get his blessing prior to creating this project**
This is a project born out of the need for a similar project for the Svelte ecosystem.\n\nAccessible and customizable components that you can copy and paste into your apps. Free. Open Source. **Use this to build your own component library**.\n\n\n\n## Documentation\n\nVisit https://shadcn-svelte.com/docs to view the documentation.\n\n## Sponsors\n\nThis project is supported by the following beautiful people/organizations:\n\n
\n \n 
\n \n
\n\n
\n \n ![\"...\"](\"...\")
\n \n
\n```\n"
},
{
"path": "docs/content/components/avatar.md",
"content": "---\ntitle: Avatar\ndescription: An image element with a fallback for representing the user.\ncomponent: true\nlinks:\n source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/avatar\n doc: https://bits-ui.com/docs/components/avatar\n api: https://bits-ui.com/docs/components/avatar#api-reference\n---\n\n\n\n\n \n \n {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}\n \n {#each headerGroup.headers as header (header.id)}\n \n {#if !header.isPlaceholder}\n \n {/each}\n \n {/each}\n \n \n {#each table.getRowModel().rows as row (row.id)}\n \n {#each row.getVisibleCells() as cell (cell.id)}\n \n \n {/each}\n \n {:else}\n \n \n No results.\n \n \n {/each}\n \n \n
\n```\n\nAmount
`,\n }));\n return renderSnippet(amountHeaderSnippet);\n },\n cell: ({ row }) => {\n const formatter = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n });\n\n const amountCellSnippet = createRawSnippet<[{ amount: number }]>(\n (getAmount) => {\n const { amount } = getAmount();\n const formatted = formatter.format(amount);\n return {\n render: () =>\n `${formatted}
`,\n };\n }\n );\n\n return renderSnippet(amountCellSnippet, {\n amount: row.original.amount,\n });\n },\n },\n];\n```\n\nWe're using the `createRawSnippet` function to create a Svelte Snippet for rendering simple HTML elements that don't require full lifecycle and state capabilities like a component. We then use the `renderSnippet` helper function to render the snippet.\n\nYou can use the same approach to format other cells and headers.\n\n\n
\n```\n\nSee [Reusable Components](#reusable-components) section for a more advanced pagination component.\n\n\n \n \n \n
\n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n
\n\n
\n```\n\nFiltering is now enabled for the `email` column. You can add filters to other columns as well. See the [filtering docs](https://tanstack.com/table/v8/docs/guide/filters) for more information on customizing filters.\n\n\n {\n table.getColumn(\"email\")?.setFilterValue(e.currentTarget.value);\n }}\n oninput={(e) => {\n table.getColumn(\"email\")?.setFilterValue(e.currentTarget.value);\n }}\n class=\"max-w-sm\"\n />\n
\n \n
\n\n
\n```\n\nThis adds a dropdown menu that you can use to toggle column visibility.\n\n\n \n table.getColumn(\"email\")?.setFilterValue(e.currentTarget.value)}\n oninput={(e) =>\n table.getColumn(\"email\")?.setFilterValue(e.currentTarget.value)}\n class=\"max-w-sm\"\n />\n \n \n {#snippet child({ props })}\n \n {/snippet}\n \n \n {#each table\n .getAllColumns()\n .filter((col) => col.getCanHide()) as column (column.id)}\n column.getIsVisible(), (v) => column.toggleVisibility(!!v)\n }\n >\n {column.id}\n \n {/each}\n \n \n
\n \n
\n\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n```\n\n