# Silk

## Summary

Silk is a React + TypeScript UI component library for building native-like interfaces on the web.

Key features:

- Swipeable bottom sheets and overlays
- Mobile-first interactions (touch gestures, keyboard handling)
- Accessible components with focus management
- Composable architecture
- Works on both mobile and desktop browsers

Primary use cases:

- Mobile web apps
- Progressive web apps (PWAs)
- Complex overlay systems (bottom sheets, dialogs, drawers, stacks, sidebars, lightboxes, pages)

## Presentation

- [Home](https://silkhq.com/): Presentation of the library's features, advantages, testimonials
- [Examples](https://silkhq.com/examples): Examples of use cases. Bottom sheets, drawers, dialogs, sidebar, toasts, lightbox, pages
- [Access](https://silkhq.com/access): Modality and prices to access the library
- [Terms](https://silkhq.com/terms): Legal terms for the website and the library

## Documentation

Version: 0.10.1

[Full documentation bundled](https://silkhq.com/docs-full.md): The full documentation bundled into one markdown file

### Fundamentals

- [Getting started](https://silkhq.com/docs/getting-started.md): How to quickly get started with Silk components
- [Examples](https://silkhq.com/docs/examples.md): Access Silk examples' code
- [Styling](https://silkhq.com/docs/styling.md): How to style Silk components
- [Composition](https://silkhq.com/docs/composition.md): How Silk components compose together

### Guides

- [Controlled Sheet](https://silkhq.com/docs/controlled-sheet.md): How to use the Sheet component in a controlled way
- [Third-Party Overlays](https://silkhq.com/docs/third-party-overlays.md): How to use the Sheet component with other third-party overlay components

### Core Components

- [Sheet](https://silkhq.com/docs/sheet.md): Sheet component, highly flexible, swipeable, with advanced features like modality and mobile keyboard handling
- [Scroll](https://silkhq.com/docs/scroll.md): Scroll component, highly flexible, with advanced features like mobile keyboard handling

### Auxiliary Components

- [SheetStack](https://silkhq.com/docs/sheet-stack.md): SheetStack component, enabling stacking animations when stacking multiple Sheet components
- [AutoFocusTarget](https://silkhq.com/docs/auto-focus-target.md): AutoFocusTarget component, helping with focus management
- [Island](https://silkhq.com/docs/island.md): Island component, helping with focus management and accessibility
- [Fixed](https://silkhq.com/docs/fixed.md): Fixed component
- [VisuallyHidden](https://silkhq.com/docs/visually-hidden.md): VisuallyHidden component, helping with elements visually without removing them from the accessibility tree
- [ExternalOverlay](https://silkhq.com/docs/external-overlay.md): ExternalOverlay component, helping with compatibility with third-party overlay components

### Functions & hooks

- [createComponentId](https://silkhq.com/docs/create-component-id.md): A function returning an id used to identify a component instance
- [usePageScrollData](https://silkhq.com/docs/use-page-scroll-data.md): A hook returning information about pages scrolling
- [useClientMediaQuery](https://silkhq.com/docs/use-client-media-query.md): A hook helping to deal with media queries in the client
- [updateThemeColor](https://silkhq.com/docs/update-theme-color.md): A function that updates the `theme-color` meta-tag
- [useThemeColorDimmingOverlay](https://silkhq.com/docs/use-theme-color-dimming-overlay.md): A hook which registers a theme color dimming overlay
- [animate](https://silkhq.com/docs/animate.md): A function that helps run a WAAPI animation on an element

### Usage with other tools

- [Usage with Tailwind V4](https://silkhq.com/docs/usage-with-tailwind-v4.md): How to use Silk with Tailwind V4
- [Usage with AI tools](https://silkhq.com/docs/usage-with-ai-tools.md): How to use Silk with AI-powered tools

### Migration guides

- [Migration v0.8.x to v0.9.x](https://silkhq.com/docs/from-v0-8-x-to-v0-9-x.md): How to migrate from Silk v0.8.x to v0.9.x

### Changelog

- [Changelog](https://silkhq.com/docs/changelog.md): The changelog for the library

### Bug reports

[GitHub Issues page](https://github.com/silk-hq/community/issues): Bugs about the library are reported here

### Community

[GitHub Discussions page](https://github.com/silk-hq/community/discussions): Discussions about the library take place here

## Keywords

react bottom sheet, drawer, modal, dialog, overlay, mobile ui, gesture ui, swipeable ui, sheet component, ios-like ui