Split cards

Docs and changelogs: each step reads as its own card.

Get Pro to installPro11 blocksReact, Vue and Figma

Orvain ships React and Vue from the same tokens. Add the one your app uses, plus the tokens.

pnpm add @orvain/react @orvain/tokens

Import @orvain/tokens/dist/tokens.css at the root of the app. Every component reads its colours, radii and type from these variables.

Dark mode is opt-in. Set data-theme="dark" on the root, or data-theme="system" to follow the operating system.

More in Accordion blocks#

How can we help?

Search the help centre or browse by topic.

Keep several open

Pro unlocks everything in Free, plus the pieces growing product teams lean on. Here’s how the two plans compare:

Feature	Free	Pro
Components	48	180+
Website blocks	12	All 140
Figma variables	–	Included
SSO and audit logs	–	Included

Annual billing saves about two months compared with paying monthly.

Was this helpful?

Thanks, we’ll improve this answer

42 of 49 found this helpful

Yes. Plans are flexible and there’s no lock-in.

Upgrades take effect straight away, and we prorate the difference.
Downgrades apply at the end of your billing cycle, so you keep Pro until then.
Cancelling stops the next charge; your workspace stays available on Free.

Was this helpful?

Thanks, we’ll improve this answer

37 of 41 found this helpful

You’re billed for each active member of the workspace, once a month or once a year.

Pending invites aren’t charged until they’re accepted.
Removing a member frees the seat straight away, and the next invoice is prorated.
Invoices and receipts live in Billing settings.

Was this helpful?

Thanks, we’ll improve this answer

28 of 35 found this helpful

Two-factor authentication takes a minute to set up from your security settings:

Open Settings → Security.
Choose Authenticator app and scan the QR code.
Enter the 6-digit code, then save your backup codes.

Keep your backup codes somewhere safe. They’re the only way back in if you lose your device.

Was this helpful?

Thanks, we’ll improve this answer

51 of 53 found this helpful

Workspaces are hosted in the EU (Frankfurt) by default. Data is encrypted in transit with TLS 1.3 and at rest with AES-256. You can export everything at any time through the API:

Export a workspace

curl https://api.orvain.dev/v1/workspace/export \
  -H "Authorization: Bearer $ORVAIN_TOKEN"

Deleting a workspace removes all of its data within 30 days.

Was this helpful?

Thanks, we’ll improve this answer

33 of 40 found this helpful

Owners can hand a workspace to another admin without any downtime.

Open Settings → Members.
Make the new owner an Admin.
Choose Transfer ownership and confirm with your password.

Was this helpful?

Thanks, we’ll improve this answer

19 of 22 found this helpful

Go to Account → Profile and choose Change email. We send a link to the new address; the change applies once you open it, and your old address gets a heads-up.

Signed in with Google or SSO? Your email comes from your identity provider, so change it there.

Was this helpful?

Thanks, we’ll improve this answer

24 of 31 found this helpful

FAQ page

Knowledge bases and help centres: search, topics and answers on one page

Billing

1 of 3 read

Pro unlocks everything in Free, plus the pieces growing product teams lean on. Here’s how the two plans compare:

Feature	Free	Pro
Components	48	180+
Website blocks	12	All 140
Figma variables	–	Included
SSO and audit logs	–	Included

Annual billing saves about two months compared with paying monthly.

Was this helpful?

What was missing?

Thanks, we’ll improve this answer

42 of 49 found this helpful

Yes. Plans are flexible and there’s no lock-in.

Upgrades take effect straight away, and we prorate the difference.
Downgrades apply at the end of your billing cycle, so you keep Pro until then.
Cancelling stops the next charge; your workspace stays available on Free.

Was this helpful?

What was missing?

Thanks, we’ll improve this answer

37 of 41 found this helpful

You’re billed for each active member of the workspace, once a month or once a year.

Pending invites aren’t charged until they’re accepted.
Removing a member frees the seat straight away, and the next invoice is prorated.
Invoices and receipts live in Billing settings.

Was this helpful?

What was missing?

Thanks, we’ll improve this answer

28 of 35 found this helpful

Security

0 of 2 read

Two-factor authentication takes a minute to set up from your security settings:

Open Settings → Security.
Choose Authenticator app and scan the QR code.
Enter the 6-digit code, then save your backup codes.

Keep your backup codes somewhere safe. They’re the only way back in if you lose your device.

Was this helpful?

What was missing?

Thanks, we’ll improve this answer

51 of 53 found this helpful

Workspaces are hosted in the EU (Frankfurt) by default. Data is encrypted in transit with TLS 1.3 and at rest with AES-256. You can export everything at any time through the API:

Export a workspace

curl https://api.orvain.dev/v1/workspace/export \
  -H "Authorization: Bearer $ORVAIN_TOKEN"

Deleting a workspace removes all of its data within 30 days.

Was this helpful?

What was missing?

Thanks, we’ll improve this answer

33 of 40 found this helpful

Account

0 of 2 read

Owners can hand a workspace to another admin without any downtime.

Open Settings → Members.
Make the new owner an Admin.
Choose Transfer ownership and confirm with your password.

Was this helpful?

What was missing?

Thanks, we’ll improve this answer

19 of 22 found this helpful

Go to Account → Profile and choose Change email. We send a link to the new address; the change applies once you open it, and your old address gets a heads-up.

Signed in with Google or SSO? Your email comes from your identity provider, so change it there.

Was this helpful?

What was missing?

Thanks, we’ll improve this answer

24 of 31 found this helpful

FAQ chapters

Long help centres: topics as chapters of one page, with a rail that follows you

Full name

Role

Time zone

EmailMentions, replies and invites

PushReal-time alerts on this device

Weekly digestA summary of the week’s activity

Send it on

Two-factor authenticationA code from your authenticator app at sign-in

Last sign-inToday, 9:14

MacBook ProSafari · London · This deviceThis device

iPad AirOrvain app · London · 2 hours ago

Windows desktopChrome · Berlin · Yesterday

Settings sections

Account and workspace panels: grouped settings that fold away

Settings draft

Workspace settings that affect everyone: nothing applies until you save

Bordered items

Sidebars and narrow columns: a boxed row per question

Numbered items

Onboarding and setup guides: ordered steps that open in place

Split cards

Docs and changelogs: each step reads as its own card

Badge items

Account settings: a status per row and a value worth copying

Minimal items

Long-form pages: questions with nothing around them but the answer

Accordion part

Settings, help and docs lists where what is open should stand out

Accordion rail

Step-by-step guides and lists that should read as a sequence

When to use#

A page of independent questions where each reader has come for exactly one of them.
Settings grouped into sections, worked on one section at a time.
An ordered guide whose steps stay visible as a list while one of them is being read.
Reference rows that are mostly a value, where only some of them need explaining.

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in Blocks See plans

Feature

Free

Pro

Components

180+

Website blocks

All 140

Figma variables

–

Included

SSO and audit logs

–

Included

Feature

Free

Pro

Components

180+

Website blocks

All 140

Figma variables

–

Included

SSO and audit logs

–

Included

Split cards

01Install the packages

02Load the tokens once

03Turn on dark mode

More in Accordion blocks#

FAQ page

FAQ chapters

Settings sections

Settings draft

Bordered items

Numbered items

Split cards

Badge items

Minimal items

Accordion part

Accordion rail

When to use#

How can we help?

What’s included in Pro?Billing·2 min read

Can I change or cancel my plan at any time?Billing·1 min read

How does per-seat billing work for teams?Billing·1 min read

How do I turn on two-factor authentication?Security·2 min read

Where is my data stored, and is it encrypted?Security·2 min read

Can I transfer ownership of a workspace?Account·1 min read

How do I change the email on my account?Account·1 min read

Billing

What’s included in Pro?, read

Can I change or cancel my plan at any time?

How does per-seat billing work for teams?

Security

How do I turn on two-factor authentication?

Where is my data stored, and is it encrypted?

Account

Can I transfer ownership of a workspace?

How do I change the email on my account?

ProfileYour public identityAva Rios · Product designer

NotificationsHow we reach youEmail and push · no digest

SecurityProtect your account2FA on · 3 sessions