Reference
Silk components
Where the @silk-hq/components sheets are used in this repo, and an index into Silk's own documentation.
Silk supplies the sheet primitives behind five components
in @statshub/ui-web. Silk's own reference is the
source of truth for the API; this page records which of our components use it
and links into that reference.
Where it is used
| Component | What it is |
|---|---|
components/sheet.tsx | The shared base the others compose |
components/bottom-sheet.tsx | The standard bottom sheet |
components/top-sheet.tsx | Sheet anchored to the top edge |
components/long-sheet.tsx | Scrollable full-height sheet |
components/sheet-with-keyboard.tsx | Bottom sheet that tracks the on-screen keyboard |
components/silk-sidebar.tsx | Drawer-style sidebar |
The React Native equivalents are unrelated — see
ui-native, whose sheets are its own.
Silk's documentation
These links are Notion pages on the Silk workspace
They need an account with access. Silk's public docs are at silkhq.com.
Getting oriented
Guides
- Implementing a controlled sheet
- Usage with third-party overlays
- Usage with Tailwind v4
- Usage with AI tools
Components
| Component | Reference |
|---|---|
Sheet | docs |
SheetStack | docs |
AutoFocusTarget | docs |
Island | docs |
ExternalOverlay | docs |
Scroll | docs |
Fixed | docs |
VisuallyHidden | docs |
Functions and hooks
| Export | Reference |
|---|---|
createComponentId | docs |
usePageScrollData | docs |
useClientMediaQuery | docs |
updateThemeColor | docs |
useThemeColorDimmingOverlay | docs |
animate | docs |
Version history
Reporting problems
Bugs go to Silk's GitHub issues; questions to GitHub discussions.