A visual component library
Get a bird’s-eye view of your components and how they’re used.
Actions
6 components
Search components
Primary
Button
ActionMore
Action bar
+
Icon button
+
Floating action
Toggle
Create⌄
Split button
The Storybook that
maintains itself.
Connect through GitHub in one click to create a browsable component library. Always in sync with prod, and shareable to your entire team.
One click set-up
Loading the interactive library…
You can’t maintain by hand what your team ships with AI.
Your team ships faster with AI. Keeping Figma, Storybook, and code in sync by hand means the drift is inevitable.
“I want us to have one source of truth. And for that one source of truth to be our code.”
“There’s nothing that keeps Figma and Storybook tightly in sync. The vast majority of engineers don't even know the documentation existed.”
One click.
Your whole system.
No stories to write. No addons to configure. No parallel library to keep alive.
reference / setup Ready in minutes
Select a repository
A
acme/web
Updated 2m ago
Connect your repo
Choose a GitHub repository and grant read-only access.
MSP
Avatar›
Identity with deterministic fallbacks.Used in 80+
Visualize your components
Dessn finds components, props, tokens, dependencies, and product usage.
AMSKJL+8
reference.dev/acmeCopy
Share the truth
Invite the team to one living library that updates with every release.
Everything designers need to understand the system.
Always in sync with prod
Every component in context
Shareable to your team
Variants and states
Explore styles, sizes, and states—from default and disabled to loading.
Primary
Accent
Soft
Outline
Destructive
Secondary
Loading
Disabled
Tokens and properties
See the tokens behind each component and the properties that control its appearance and behavior.
Properties
Controls that change the component’s visual behavior.
variantChanges the visual treatment.sizeChanges the component scale.disabledPrevents interaction and applies disabled state.Button.BusyConfigures this part of the component.fill-primary
Usage in your product
See where a component is used, then open the screen to view it highlighted in context.
←Home● Highlighting Button
Coming up＋ New note
July 8 · Wed
Draft follow-up bullets
Weekly Sales SyncSay more
Components on this screen
Select a component to highlight its rendered instances.
Avatar›
Banner›
Menu›
Get your automated Storybook
7-day money back guarantee
If you’re not happy with your design system, contact lucie[@]dessn.ai within 7 days and we’ll refund your payment in full.
$12 / month
- A visual design system from your codebase
- Automatic updates as your code changes
- Component usage and parent/child relationships
- A shared reference for your team
- One-click setup
“Sharing is dead simple and incredibly useful. We already are feeling a speed up in how quick we can iterate on design together. Figma and Magic Patterns have been pulling us down in this regard.”
“Dessn is on another level. I actually feel like I'm working with another designer that cares as much about getting the details right as I do.”
“The team and I are really loving Dessn. I feel creative again.”
“The hours I’ve spent maintaining templates... I can’t believe I don’t have to do this anymore.”