https://github.com/seamapi/react
Seam Components are a set of white-labeled UI elements that can be added to your application in seconds. Use them in any app as native web components or as React components and hooks.
https://github.com/seamapi/react
maintained
Last synced: 4 months ago
JSON representation
Seam Components are a set of white-labeled UI elements that can be added to your application in seconds. Use them in any app as native web components or as React components and hooks.
- Host: GitHub
- URL: https://github.com/seamapi/react
- Owner: seamapi
- License: mit
- Created: 2023-03-28T17:02:59.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-09-30T23:52:38.000Z (4 months ago)
- Last Synced: 2025-10-01T15:56:18.788Z (4 months ago)
- Topics: maintained
- Language: TypeScript
- Homepage: https://react.seam.co
- Size: 6.02 MB
- Stars: 7
- Watchers: 10
- Forks: 2
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Seam Components
[](https://www.npmjs.com/package/@seamapi/react)
[](https://github.com/seamapi/react/actions/workflows/check.yml)
> Seam Components may be used in **any** web application as native **[⚡Web Components ⚡](#with-native-web-components)**
## Description
> [See our official announcement!](https://www.seam.co/blog/Introducing-Seam-Components_ce7e8985-2fe6-4780-8c60-055b34daee55) 🎉
Seam Components are a set of white-labeled UI elements that can be added to your application in seconds.
With these components, you can offer advanced device management features to your users without needing to develop complex logic for managing device state,
refreshing data, and performing actions.
### Resources to Get Started
- [Seam Components Overview](https://docs.seam.co/latest/seam-components/overview)
- [Get started with Seam](https://www.seam.co/).
- [Get started without needing a backend](https://docs.seam.co/latest/seam-components/get-started-with-client-side-components).
- [Get started with Angular](https://docs.seam.co/latest/seam-components/overview/angular).
- [Get started with Vue](https://docs.seam.co/latest/seam-components/overview/vue).
- [Get started with Client Sessions](https://docs.seam.co/latest/seam-components/get-started-with-react-components-and-client-session-tokens).
- [Make a Supported Devices Page](https://docs.seam.co/latest/seam-components/make-a-supported-devices-page).
- Reference the [Component API](https://docs.seam.co/latest/seam-components/react-components).
- Find developer specific technical documentation in the [README](https://github.com/seamapi/react/).
- Play with the components live in the interactive [Storybook](https://react.seam.co/)!
- See how the components work with a real Seam sandbox workspace in this [live example app](https://react.seam.co/examples/basic/).
- Clone a [sample app in your preferred framework](https://github.com/seamapi/seam-components-sample-apps).
- [API reference documentation generated by TypeDoc](https://react.seam.co/api-docs/).
### Live Examples
- Basic Example App ([source](https://github.com/seamapi/react/tree/main/examples/basic/))
- Web Components Example App ([source](https://github.com/seamapi/react/tree/main/examples/web-components/))
## Installation
Add this as a dependency to your project using [npm] with
```
$ npm install @seamapi/react
```
[npm]: https://www.npmjs.com/
## Usage
### With React
> Check out the [basic example app](./examples/basic)!
1. Obtain a publishable key from the [Seam Console].
2. Wrap your React app with the `SeamProvider`.
3. Drop in Seam Components.
```tsx
import { ConnectAccountButton, DeviceTable, SeamProvider } from '@seamapi/react'
export function App() {
return (
My App
)
}
```
[Seam Console]: https://console.seam.co/
### With Native Web Components
> Check out the [web component example app](./examples/web-components)!
1. Obtain a publishable key from the [Seam Console].
2. Add the `` tag to your page and drop in Seam Components.
```html
<body>
<seam-connect-account-button
publishable-key="your_publishable_key"
></seam-connect-account-button>
<seam-device-table publishable-key="your_publishable_key"></seam-device-table>
<script
type="module"
src="https://react.seam.co/v/4.13.2/dist/elements.js"
>