The Figma library In Full.
Every component, token, template and pattern that powers our product, drawn, named and version-controlled in a single Figma file. Built for designers shipping at speed.
Variants
Type
State
Size
Theme
+
Components
Every primitive, pattern and page template, drawn and named.
+
Variants
States, sizes and themes, mapped across the whole set.
+
Design tokens
Colour, type, spacing and elevation — the same names as the code.
Pages
Named and ordered, so nothing is hunted for.
You assemble screens, you don't draw them.
7 components come out of the file and land as a working dashboard — each one named as it drops. Nothing drawn, nothing detached.
Filter
Ethan Cole
Perfectly organized Figma libraries.
Engineers don't ship Figma. They ship code. So we built Orvain code-first: strict types, RSC-safe, under 12 kB. The Figma kit mirrors the same props and tokens, so designers hand off without translation.
600+components
An extended component library
Every primitive, pattern and page template, drawn, named and variant-mapped so you assemble screens instead of starting from a blank canvas.
- 01Countless variants
- 02Comprehensive coverage
- 03Well-structured layers
- 04Auto-layout everywhere
Design system essentials.
Color, type, spacing and elevation live once as Figma variables that map 1:1 to the package's CSS variables. Change a token and both sides move together — there is no second place to update and nothing to keep in sync by hand.
102primitives
One primitive, thirteen collections
Grey runs eleven steps, FFFFFF to 070707 — and Semantic Colors, Interactions and Component Tokens all point back to it by reference, never a retyped hex.
- 01Light & dark modes
- 02White-label theming
- 03A single source of truth
- 04Zero drift from code
Specs your engineers can read.
The jump from frame to code is where most kits stop and most teams start guessing. Every component here carries the notes an engineer would otherwise have to ask for, written into the file beside the thing they describe.
Documented hand-off
Every component, described
Each component opens on a page that says what it is for, what it is made of and where it is meant to be used, before a single prop is discussed.
- 01Prop-level annotations
- 02Usage guidelines
- 03Versioned releases
- 04Figma → code parity
Blocks, not just the parts.
A table arrives with its header, its sorting and its empty state. A date picker with its range, its presets and its month switcher. Whole sections, drawn and named, so the first screen of a project is assembled rather than started.
Interactive preview
Drag an event to move it, or pick a day to add one.
Search
Add Event
April 2026
Today
FilterSun
Mon
Tue
Wed
Thu
fri
sat
Design review
Design review
Design review
Cap.
Design review
Cap.
Design review
Cap.
Design review
Cap.
Design review
Cap.Design review
Soft egg & avocado toast
Six minutes in the pan, a ripe avocado and good sourdough. Cut it while the yolk still runs.
20
Mins
2
Serves
Easy
Spicy Choice
Header
1
ChatGPT
# 129
Website
Link.comAmount
$24,000
.00
Contact
Ethan ColeCategories
Close date
April 22, 2026
6
3
2d
Apple
# 129
Website
Link.comAmount
$24,000
.00
Contact
Ethan ColeCategories
Close date
April 22, 2026
632dApple
# 129
Website
Link.comAmount
$24,000
.00
Contact
Ethan ColeCategories
Close date
April 22, 2026
632d
Revenue this year
$27,496
12%vs last year
$15,750
Command menu keyboard navigation
Everything that happened while you were away.
In Progress
Ava Rios created branch feat/cmdk-nav
Ava Rios
∙
12:14 PM
Started on arrow-key navigation. Wrapping selection at both ends and scrolling the active row into view. Reactions and the composer are next.
1
1(You)
Mia Kwan
∙
12:14 PM
Confirmed the reaction chip states against the kit — default counted, the brand “(You)” pill with the remove ✕, and the add-emoji. Uploading the redlines and a quick capture.
pdfreaction-states.PDF
PDF
avicmdk-capture.AVI
MP4
14 Replies
3 unread replies
Tom Beck
∙
12:14 PM
Looped in the folks who own the shortcut map so keybinds stay consistent across surfaces.
Leave a comment
Send message
Company Name
Description
Team Members
Deadline
Northwind
northwind.co
Design system rollout across web and mobile.
+929/09/2023
Halcyon
halcyon.io
Checkout redesign, empty and error states included.
+912/10/2023
Meridian
meridian.studio
Marketing site rebuild ahead of the launch.
+903/11/2023
How can we help?
Search the knowledge base or browse by topic.
Search...
⌘1
Filter
Billing(3)
Security(2)
Account(1)What’s included in the pro plan
Billing
Can I change or cancel my plan anytime?
BillingHow does per-seat billing work for teams?
BillingHow do I enable two-factor authentication?
SecurityWhere is my data stored, and is it encrypted?
SecurityCan I transfer ownership of a workspace?
AccountJan 2026 Calendar
Mon
2
Tue
3
Wed
4
Thu
5
Fri
6
Sat
7
Sun
8
Design review
Today 10:10 - 10:20 AM
Ten minutes to land the open decisions. Bring the file, not a deck — anything still open at 10:20 moves to Friday.
Google meet
+4
Please Connect Your Account
Connect Account
pdf
xlsDescribe what you would like to create...
Andreno
Counter.tsx
Copyimport { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
// one click, one increment
return <button onClick={() => setCount(count + 1)}>
}
14px
Designing calm, capable editors
A rich text editor should get out of the way. Select any text to format it — the toolbar buttons above light up to match what's under your cursor. Try bold, italic
What good tools share
Three things separate an editor you tolerate from one you reach for:
- Formatting that maps to muscle memory —
all work.
- Blocks you can turn into anything: headings, lists, quotes, code.
- Quiet defaults, with power a keystroke away.
Ship the formatting toolbar
Sync active states to the selection
Add @mentions and inline code
The best interface is the one you stop noticing.
Kit review with the product team
Walked the block set end to end — the table, the date picker, the empty states. Three things came back: a tighter default row height, a second toast variant, and names that match the ones in code.
Finish the block components
1 / 4Sync tokens to the library
Hand the redlines to engineering
1 / 4Write the release note
1 / 4The row height came from the densest table we had, not the most common one, so every list in the kit inherited a screen that never existed.
Dropping it to fifty-six pixels puts three more rows on a laptop screen and costs nothing at the top of the page, where the header already sets the rhythm.
The toast needs a second variant for the case nobody drew: an action that failed and can be retried, with the retry in the toast rather than back in the page.
Names last longer than layouts. Anything a component is called here should be the name it answers to in the code, or the handoff pays for it twice.
Build an audience
Combine filters to target the right people.
LIVE27,973
of 48,230 total contacts
1 filter applied
Updated live
Select a category
Family in lawCo-workers...5
Select a country
Try Bahamas
Auto-updates as members change.
Upload / add attachments
Drag files in or pick from your device.
Click to upload from device
PDF, DOC, XLS, PNG, JPG · Max. file size 25 MB
Files stay private until you save.
2 files
pdfQ3-financial-report.pdf
78 KB
Uploaded
xlsFile Summary
7.68 MB
/
12.8 MB
4%
4 files · 17.5 MB of 2 GB used
Choose your plan
Switch or cancel anytime
Starter
For individuals getting started.
Up to 3 projects
Community support
$0/mo
Pro
PopularFor growing teams that ship fast.
Unlimited projects
Priority support
50 GB storage
$24/mo
Business
Security & controls for scale.
SSO & SAML
Audit logs
$59/mo
Notification settings
Pick a channel for each kind of update.
Notification
Push
SMS
Sign-in alerts
New device or location
Password changes
Security-related edits
Activity
Mentions
When someone @mentions you
Comments
Replies on your items
Weekly summary
Monday recap
Search or jump to
⌘
All
People
reactions
Files
Pages
Messages
+9No people found
Try a name, an @handle or an email address. The filters above narrow the list before you type.
navigate
Tags
open
120
New Customers
Your customer volume has increased by
15%
Notifications
Everything that happened while you were away.
Today
+4Alex Rivera, Sam Doyle
and 4 others reacted to Q3 Product Roadmap
∙
8 min ago
Noah Reed
mentioned you in #design.
∙
2 hr ago
“@you can you confirm the red unread dot uses Error/#ec0d33?
Ava West
started following you
∙
8 min ago
Yesterday
Weekly digest
is ready
8 min ago
Leo bryn
shared a file with you
∙
2 hr ago
pdforvain-ui.fig(4mb)
Your tokens are synced
Colour, type and elevation now match the library file. Anything already placed on your canvas picks the change up the next time you open it, and every local override you made is left as it is.
This message will close in6seconds.
Pick a date
Choose the day the reminder should land.
Pick a time
Times are shown in your own zone.
10
11
12
Hour
10
11
12
Min
Add
Opacity
50
Verify
Intensity
0%
Low
High
We couldn’t publish your library
Two components still point at a token that was removed. Fix those and publish again.
Don't show it again
Tell us why!
35.92%
397.66 over 1,107
GB
Country
Q1/2026
Quarters
Step 1 of 4
Ethan Cole
@Ethansworld224
Set status
Move
edit
Share
delete
Workspace settings
Manage your profile, team and preferences
General
Profile
Name, photo and public details
Notifications
Email, push and in-app alerts
Language & region
English (US) · GMT+1
Advanced
Integrations
Slack, GitHub and 4 more
Delete workspace
Permanently remove all data
Notification preferences
Leading checkboxes, with the third row trailing-aligned.
Product updates
(Weekly)
NewNew features and improvements.
Mentions & replies
Get notified when someone tags you.
Product updates
(Weekly)
Sign-ins and password changes. Trailing checkbox variant.
Components that become products.
Real products shipped with our components, composed by hand or generated with AI. Same tokens, same library, infinite range.
Things teams ask before they switch.
Why pick Orvain over shadcn or Radix?
Both are great. Shadcn is a copy-paste recipe where you own every line, and Radix gives you unstyled primitives. Orvain is an opinionated library: a single import, white-label tokens, real bundle discipline, and the only one shipping a first-class MCP server. If you want a kit that’s engineered rather than assembled, that’s us.
What is an MCP server, exactly?
Which AI tools are supported?
How do you guarantee “0 hallucinated props”?
Does this work with my own theme?
Will it bloat my bundle?
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.The Figma libraryIn Full.
Every component, token, template and pattern that powers our product, drawn, named,
and version-controlled in a single Figma file. Built for designers shipping at speed.
The Orvain UI library open in the Figma editor. The properties panel on the canvas changes the selected Product Card component — its type, state, size and theme.
95%Background
Ethan Cole
Posted 4 minutes ago
Looking for a creative UIUX designer to build our app
Early-stage startup looking for a designer to own our product UI end to end, from first wireframes to a shipped app.
$200/hr
Hourly+
Components
Every primitive, pattern and page template, drawn and named.
+
Variants
States, sizes and themes, mapped across the whole set.
+
Design tokens
Colour, type, spacing and elevation — the same names as the code.
Pages
Named and ordered, so nothing is hunted for.
Perfectly organized Figma libraries.
Engineers don't ship Figma. They ship code. So we built Orvain code-first: strict types, RSC-safe, under 12 kB. The Figma kit mirrors the same props and tokens, so designers hand off without translation.
600+components
An extended component library
Every primitive, pattern and page template, drawn, named and variant-mapped so you assemble screens instead of starting from a blank canvas.
- 01Countless variants
- 02Comprehensive coverage
- 03Well-structured layers
- 04Auto-layout everywhere
Design system essentials.
Color, type, spacing and elevation live once as Figma variables that map 1:1 to the package's CSS variables. Change a token and both sides move together — there is no second place to update and nothing to keep in sync by hand.
102primitives
One primitive, thirteen collections
Grey runs eleven steps, FFFFFF to 070707 — and Semantic Colors, Interactions and Component Tokens all point back to it by reference, never a retyped hex.
- 01Light & dark modes
- 02White-label theming
- 03A single source of truth
- 04Zero drift from code
Specs your engineers can read.
The jump from frame to code is where most kits stop and most teams start guessing. Every component here carries the notes an engineer would otherwise have to ask for, written into the file beside the thing they describe.
Documented hand-off
Every component, described
Each component opens on a page that says what it is for, what it is made of and where it is meant to be used, before a single prop is discussed.
- 01Prop-level annotations
- 02Usage guidelines
- 03Versioned releases
- 04Figma → code parity
You assemble screens, you don't draw them.
Search the kit by name, drag the result onto an empty frame. 7 components go in; a working dashboard comes out, each one named as it lands. Nothing drawn, nothing detached.
Share100%
Orvain.comHi, Yogas. Glad you’ve joined us.
Break down lengthy texts into concise summaries to grasp.
Create Request
$6.8kRevenueBlocks, not just the parts.
A table arrives with its header, its sorting and its empty state. A date picker with its range, its presets and its month switcher. Whole sections, drawn and named, so the first screen of a project is assembled rather than started.
Interactive preview
Drag an event to move it, or pick a day to add one.
Search
Add EventApril 2026
Today
FilterSun
Mon
Tue
Wed
Thu
fri
sat
Design review
Design review
Design review
Cap.Design review
Cap.Design review
Cap.Design review
Cap.Design review
Cap.Design review
Soft egg & avocado toast
Six minutes in the pan, a ripe avocado and good sourdough. Cut it while the yolk still runs.
20
Mins
2
Serves
Easy
Spicy ChoiceHeader
1ChatGPT
# 129
Website
Link.comAmount
$24,000
.00
Contact
Ethan ColeCategories
Close date
April 22, 2026
632dApple
# 129
Website
Link.comAmount
$24,000
.00
Contact
Ethan ColeCategories
Close date
April 22, 2026
632dApple
# 129
Website
Link.comAmount
$24,000
.00
Contact
Ethan ColeCategories
Close date
April 22, 2026
632dRevenue this year
$27,496
12%vs last year
$15,750
Command menu keyboard navigation
Everything that happened while you were away.
In ProgressAva Rios created branch feat/cmdk-nav
Ava Rios
∙
12:14 PM
Started on arrow-key navigation. Wrapping selection at both ends and scrolling the active row into view. Reactions and the composer are next.
11(You)Mia Kwan
∙
12:14 PM
Confirmed the reaction chip states against the kit — default counted, the brand “(You)” pill with the remove ✕, and the add-emoji. Uploading the redlines and a quick capture.
pdfreaction-states.PDF
PDFavicmdk-capture.AVI
MP414 Replies
3 unread replies
Tom Beck
∙
12:14 PM
Looped in the folks who own the shortcut map so keybinds stay consistent across surfaces.
Leave a comment
Send messageCompany Name
Description
Team Members
Deadline
Northwind
northwind.co
Design system rollout across web and mobile.
+929/09/2023
Halcyon
halcyon.io
Checkout redesign, empty and error states included.
+912/10/2023
Meridian
meridian.studio
Marketing site rebuild ahead of the launch.
+903/11/2023
How can we help?
Search the knowledge base or browse by topic.
Search...
⌘1FilterBilling(3)Security(2)Account(1)What’s included in the pro plan
BillingCan I change or cancel my plan anytime?
BillingHow does per-seat billing work for teams?
BillingHow do I enable two-factor authentication?
SecurityWhere is my data stored, and is it encrypted?
SecurityCan I transfer ownership of a workspace?
AccountJan 2026 Calendar
Mon
2
Tue
3
Wed
4
Thu
5
Fri
6
Sat
7
Sun
8
Design review
Today 10:10 - 10:20 AM
Ten minutes to land the open decisions. Bring the file, not a deck — anything still open at 10:20 moves to Friday.
Google meet+4Please Connect Your Account
Connect AccountpdfxlsDescribe what you would like to create...
AndrenoCounter.tsx
Copyimport { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
// one click, one increment
return <button onClick={() => setCount(count + 1)}>
}
14pxDesigning calm, capable editors
A rich text editor should get out of the way. Select any text to format it — the toolbar buttons above light up to match what's under your cursor. Try bold, italic
What good tools share
Three things separate an editor you tolerate from one you reach for:
- Formatting that maps to muscle memory —
all work.
- Blocks you can turn into anything: headings, lists, quotes, code.
- Quiet defaults, with power a keystroke away.
Ship the formatting toolbar
Sync active states to the selection
Add @mentions and inline code
The best interface is the one you stop noticing.
Choose your plan
Switch or cancel anytime
Starter
For individuals getting started.
Up to 3 projects
Community support
$0/mo
Pro
PopularFor growing teams that ship fast.
Unlimited projects
Priority support
50 GB storage
$24/mo
Business
Security & controls for scale.
SSO & SAML
Audit logs
$59/mo
Notification settings
Pick a channel for each kind of update.
Notification
Push
SMS
Sign-in alerts
New device or location
Password changes
Security-related edits
Activity
Mentions
When someone @mentions you
Comments
Replies on your items
Weekly summary
Monday recap
Search or jump to
⌘All
PeoplereactionsFilesPagesMessages+9No people found
Try a name, an @handle or an email address. The filters above narrow the list before you type.
navigate
Tags
open
120
New Customers
Your customer volume has increased by
15%Notifications
Everything that happened while you were away.
Today
+4Alex Rivera, Sam Doyle
and 4 others reacted to Q3 Product Roadmap
∙
8 min ago
Noah Reed
mentioned you in #design.
∙
2 hr ago
“@you can you confirm the red unread dot uses Error/#ec0d33?
Ava West
started following you
∙
8 min ago
Yesterday
Weekly digest
is ready
8 min ago
Leo bryn
shared a file with you
∙
2 hr ago
pdforvain-ui.fig(4mb)Your tokens are synced
Colour, type and elevation now match the library file. Anything already placed on your canvas picks the change up the next time you open it, and every local override you made is left as it is.
This message will close in6seconds.
Pick a date
Choose the day the reminder should land.
Pick a time
Times are shown in your own zone.
10
11
12
Hour
10
11
12
Min
We couldn’t publish your library
Two components still point at a token that was removed. Fix those and publish again.
Don't show it again
AddOpacity50VerifyIntensity
0%
Low
High
35.92%
397.66 over 1,107
GB
Country
Q1/2026
Quarters
Step 1 of 4
Tell us why!
Ethan Cole
@Ethansworld224
Set status
Move
edit
Share
delete
Workspace settings
Manage your profile, team and preferences
General
Profile
Name, photo and public details
Notifications
Email, push and in-app alerts
Language & region
English (US) · GMT+1
Advanced
Integrations
Slack, GitHub and 4 more
Delete workspace
Permanently remove all data
Notification preferences
Leading checkboxes, with the third row trailing-aligned.
Product updates
(Weekly)
NewNew features and improvements.
Mentions & replies
Get notified when someone tags you.
Product updates
(Weekly)
Sign-ins and password changes. Trailing checkbox variant.
Upload / add attachments
Drag files in or pick from your device.
Click to upload from device
PDF, DOC, XLS, PNG, JPG · Max. file size 25 MB
Files stay private until you save.
2 files
pdfQ3-financial-report.pdf
78 KB
UploadedxlsFile Summary
7.68 MB
/
12.8 MB
4%
4 files · 17.5 MB of 2 GB used
Build an audience
Combine filters to target the right people.
LIVE27,973
of 48,230 total contacts
1 filter applied
Updated live
Select a category
Family in lawCo-workers...5Select a country
Try Bahamas
Auto-updates as members change.
Kit review with the product team
Walked the block set end to end — the table, the date picker, the empty states. Three things came back: a tighter default row height, a second toast variant, and names that match the ones in code.
Finish the block components
1 / 4Sync tokens to the library
Hand the redlines to engineering
1 / 4Write the release note
1 / 4The row height came from the densest table we had, not the most common one, so every list in the kit inherited a screen that never existed.
Dropping it to fifty-six pixels puts three more rows on a laptop screen and costs nothing at the top of the page, where the header already sets the rhythm.
The toast needs a second variant for the case nobody drew: an action that failed and can be retried, with the retry in the toast rather than back in the page.
Names last longer than layouts. Anything a component is called here should be the name it answers to in the code, or the handoff pays for it twice.
Components thatBecome products.
Real products shipped with our components, composed by hand or generated with AI. Same tokens, same library, infinite range.
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.