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.
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
Hourly600+
Figma components
Every primitive, pattern and page template, drawn and named.
11,000+
Variants
States, sizes and themes, mapped across the whole set.
130+
Design tokens
Colour, type, spacing and elevation: the same names as the code.
7
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.
Orvain.com
Hi, Yogas. Glad you’ve joined us.
Break down lengthy texts into concise summaries to grasp.
Filter
Ethan Cole
Tap a part to replay it
7/7
Perfectly organized Figma libraries.
Every primitive, pattern and page template in one file: drawn, named and variant-mapped to the same props and tokens as the code, so a designer's file and an engineer's import describe the same component.
600+Figma 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
April 2026
Today
Sun
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
Header
1
ChatGPT
# 129
Website
Amount
$24,000
.00
Contact
Categories
Close date
April 22, 2026
Apple
# 129
Website
Amount
$24,000
.00
Contact
Categories
Close date
April 22, 2026
Apple
# 129
Website
Amount
$24,000
.00
Contact
Categories
Close date
April 22, 2026
Revenue this year
$27,496
vs last year
$15,750
Command menu keyboard navigation
Everything that happened while you were away.
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.
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.
reaction-states.PDF
cmdk-capture.AVI
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
Company Name
Description
Team Members
Deadline
Northwind
northwind.co
Design system rollout across web and mobile.
29/09/2023
Halcyon
halcyon.io
Checkout redesign, empty and error states included.
12/10/2023
Meridian
meridian.studio
Marketing site rebuild ahead of the launch.
03/11/2023
How can we help?
Search the knowledge base or browse by topic.
Search...
⌘1
What’s included in the pro plan
Can I change or cancel my plan anytime?
How does per-seat billing work for teams?
How do I enable two-factor authentication?
Where is my data stored, and is it encrypted?
Can I transfer ownership of a workspace?
Jan 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.
Please Connect Your Account
Connect Account
Describe what you would like to create...
Counter.tsx
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
// one click, one increment
return <button onClick={() => setCount(count + 1)}>
}
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
Sync tokens to the library
Hand the redlines to engineering
Write the release note
The 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.
27,973
of 48,230 total contacts
1 filter applied
Updated live
Select a category
Select a country
Try Bahamas
Auto-updates as members change.
Search or jump to
⌘
All
No 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
Alex 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
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
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.
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
Q3-financial-report.pdf
78 KB
File Summary
7.68 MB
/
12.8 MB
4%
4 files · 17.5 MB of 2 GB used
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?
Model Context Protocol is an open standard that lets AI tools call structured “tools” over a connection. Our hosted endpoint exposes your component library, its props, tokens and patterns, so any MCP-aware assistant can query the real source instead of guessing from training data.
Which AI tools are supported?
Anything that speaks MCP today: Cursor, Claude Code, Windsurf, and a growing list, plus drop-in adapters for v0 and GitHub Copilot. Connecting is a single config entry pointing at mcp.orvain.dev.
How do you guarantee “0 hallucinated props”?
Every generation is validated against the live component schemas. Props that don’t exist, missing required variants, and invented imports are rejected before code is written, and the agent corrects itself against the real API.
Does this work with my own theme?
Yes. White-label tokens resolve from one config file. Re-theme once and every generation after that follows your brand automatically: colors, radii, spacing, type.
Will it bloat my bundle?
No. Components are tree-shakeable, RSC-safe and strictly typed, and the core ships under 12 kB gzipped. You import what you use and nothing else tags along.
Premium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
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.
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
Hourly600+
Figma components
Every primitive, pattern and page template, drawn and named.
11,000+
Variants
States, sizes and themes, mapped across the whole set.
130+
Design tokens
Colour, type, spacing and elevation: the same names as the code.
7
Pages
Named and ordered, so nothing is hunted for.
Perfectly organized Figma libraries.
Every primitive, pattern and page template in one file: drawn, named and variant-mapped to the same props and tokens as the code, so a designer's file and an engineer's import describe the same component.
600+Figma 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%Hi, Yogas. Glad you’ve joined us.
Break down lengthy texts into concise summaries to grasp.
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
April 2026
Today
Sun
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
Header
1ChatGPT
# 129
Website
Amount
$24,000
.00
Contact
Categories
Close date
April 22, 2026
Apple
# 129
Website
Amount
$24,000
.00
Contact
Categories
Close date
April 22, 2026
Apple
# 129
Website
Amount
$24,000
.00
Contact
Categories
Close date
April 22, 2026
Revenue this year
$27,496
vs last year
$15,750
Command menu keyboard navigation
Everything that happened while you were away.
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.
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.
reaction-states.PDF
cmdk-capture.AVI
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
Company Name
Description
Team Members
Deadline
Northwind
northwind.co
Design system rollout across web and mobile.
29/09/2023
Halcyon
halcyon.io
Checkout redesign, empty and error states included.
12/10/2023
Meridian
meridian.studio
Marketing site rebuild ahead of the launch.
03/11/2023
How can we help?
Search the knowledge base or browse by topic.
Search...
⌘1What’s included in the pro plan
Can I change or cancel my plan anytime?
How does per-seat billing work for teams?
How do I enable two-factor authentication?
Where is my data stored, and is it encrypted?
Can I transfer ownership of a workspace?
Jan 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.
Please Connect Your Account
Connect AccountDescribe what you would like to create...
Counter.tsx
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
// one click, one increment
return <button onClick={() => setCount(count + 1)}>
}
Search or jump to
⌘All
No 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
Alex 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
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
Intensity
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
Q3-financial-report.pdf
78 KB
File 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.
27,973
of 48,230 total contacts
1 filter applied
Updated live
Select a category
Select 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
Sync tokens to the library
Hand the redlines to engineering
Write the release note
The 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.
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.
Components thatBecome products.
Real products shipped with our components, composed by hand or generated with AI. Same tokens, same library, infinite range.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCP