feat: add 'use client' directive to client rendered components

[paanSinghCoder]

Description

refactor: Add 'use-client' for components with client side React features like hooks, ref, etc.

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactor (no functional changes, no bug fixes just code improvements)
• Chore (changes to the build process or auxiliary tools and libraries such as documentation generation)
• Style (changes that do not affect the meaning of the code (white-space, formatting, etc))
• Test (adding missing tests or correcting existing tests)
• Improvement (Improvements to existing code)
• Other (please specify)

How Has This Been Tested?

manual

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (.mdx files)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

Screenshots (if appropriate):

[Add screenshots here]

Related Issues

[Link any related issues here using #issue-number]

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Error		Apr 9, 2026 10:04am

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR systematically adds the 'use client'; directive to 18 component modules in the raystack component library, including alert-dialog, avatar, button, combobox, data-table hooks, dialog, drawer, flex, grid, grid-item, menu, radio, select, separator, switch, tabs, toast, and tooltip. This directive marks these modules as client components, which is required for React Server Components (RSC) and Next.js App Router compatibility.

Possibly related issues

• Add 'use client' directive for RSC compatibility #679 — Addresses the same objective of adding 'use client'; directives to component modules for RSC/App Router compatibility across the raystack component library.

Suggested reviewers

• rsbh
• rohilsurana
• rohanchkrabrty

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: adding 'use client' directives to client-rendered components across 18 files.
Description check	✅ Passed	The description clearly relates to the changeset, explaining the purpose of adding 'use-client' directives to components with client-side React features.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/raystack/components/data-table/hooks/useDataTable.tsx (1)

1-14: ⚠️ Potential issue | 🔴 Critical

Add 'use client' directive to useFilters.tsx.

useFilters.tsx calls useDataTable() (line 11), which is imported from a client module marked with 'use client'. In React Server Components, any module importing from a client boundary must also be marked as a client component. All other files importing useDataTable (search.tsx, toolbar.tsx, virtualized-content.tsx, filters.tsx, content.tsx, display-settings.tsx) have the directive; useFilters.tsx is the only missing one.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/raystack/components/data-table/hooks/useDataTable.tsx` around lines
1 - 14, Add the "use client" directive to the top of useFilters.tsx because it
imports the client-bound useDataTable() hook; open useFilters.tsx and insert
'use client' as the first line so the module is treated as a client component
(this aligns it with other files like search.tsx and toolbar.tsx that already
import useDataTable).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@packages/raystack/components/data-table/hooks/useDataTable.tsx`:
- Around line 1-14: Add the "use client" directive to the top of useFilters.tsx
because it imports the client-bound useDataTable() hook; open useFilters.tsx and
insert 'use client' as the first line so the module is treated as a client
component (this aligns it with other files like search.tsx and toolbar.tsx that
already import useDataTable).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 09aab64b-c4dd-4340-b506-ee3f924ec599

📥 Commits

Reviewing files that changed from the base of the PR and between 20be4ef and db7600b.

📒 Files selected for processing (18)

• packages/raystack/components/alert-dialog/alert-dialog.tsx
• packages/raystack/components/avatar/avatar.tsx
• packages/raystack/components/button/button.tsx
• packages/raystack/components/combobox/combobox.tsx
• packages/raystack/components/data-table/hooks/useDataTable.tsx
• packages/raystack/components/dialog/dialog.tsx
• packages/raystack/components/drawer/drawer.tsx
• packages/raystack/components/flex/flex.tsx
• packages/raystack/components/grid/grid-item.tsx
• packages/raystack/components/grid/grid.tsx
• packages/raystack/components/menu/menu.tsx
• packages/raystack/components/radio/radio.tsx
• packages/raystack/components/select/select.tsx
• packages/raystack/components/separator/separator.tsx
• packages/raystack/components/switch/switch.tsx
• packages/raystack/components/tabs/tabs.tsx
• packages/raystack/components/toast/toast.tsx
• packages/raystack/components/tooltip/tooltip.tsx

[rohanchkrabrty]

Not all components require use client
Please add the directive to components that should be client components only

[paanSinghCoder]

@rohanchkrabrty Flex and Grid, both uses useRender hook thus added the use client.

Removed for the import only files.

[rohanchkrabrty]

@paanSinghCoder None of the changed components require the directive.

Components which don't need since they are just wrapping Base UI Primitives and has no interactivity.

• Avatar
• Button
• Radio
• Separator
• Switch
• Tabs

Remaining components which use useRender

• Flex
• Grid
• Grid.Item

Base UI useRender is RSC compatible, so there's no need for the directive in this components too. I have tested this on my end too.