Reference
Design systems and models
The design systems Vibr builds with, how to use any package from npm, and the models each provider offers.
Built-in design systems
| Design system | Kind | Packages |
|---|---|---|
| Material UI (MUI) | React | @mui/material@6, @mui/icons-material@6, Emotion |
| Ant Design | React | antd@5 |
| Fluent UI React | React | @fluentui/react-components@9 |
| Mantine | React | @mantine/core@7, @mantine/hooks@7 |
| Shoelace | Web components | @shoelace-style/shoelace@2 |
| Octuple | React | @eightfold.ai/octuple@2 |
Drafts import real components from these packages, loaded from a CDN, and render with React 19. Before building, Vibr reads which components each package actually exports, so the model can't invent one that doesn't exist. The CDN is esm.sh. If it stops responding, Vibr loads drafts from a backup instead (jsDelivr, or Vibr's own copy of Fluent UI) for the rest of your visit and tells you so.
Changing the design system starts a new session. Save anything you want to keep first.
Use any package from npm
Choose Custom npm package… in the Design system picker, and fill in:
| Field | What to enter | Example |
|---|---|---|
| Package (with version) | The package name and major version. | @radix-ui/themes@3 |
| CSS path or URL | Optional. The package's stylesheet, if it has one. | @radix-ui/themes@3/styles.css |
| Kind | React, or Web components. | React |
| Register module | Optional, for web components that need a loader to register them. | my-ds@1/dist/loader.js |
Vibr checks that the package exists on npm before building. If the name or version is wrong, it tells you.
Vibr also looks at the package before anything loads it. A version range is pinned to the newest release that's at least 2 weeks old (@radix-ui/themes@3 becomes, say, @radix-ui/themes@3.3.0 in the field), so a bad release published today isn't picked up. A package listed as malware never loads. Under the field, Vibr flags known security advisories, a deprecated version, a package under 30 days old or with under 1,000 downloads last week, and a name one or two letters off a popular package. These checks use public data from deps.dev, npm and OSV, and send only the package's name and version.
To choose chart and table libraries as well, see Charts and tables.
Providers and models
| Provider | Models | Plans with |
|---|---|---|
| Google Gemini | gemini-3.5-flash (default), gemini-3.7-flash, gemini-flash-latest, gemini-3.1-pro-preview | gemini-3.5-flash |
| OpenAI | gpt-5.5 (default), gpt-5.4, gpt-5.4-mini | gpt-5.4-mini |
| Anthropic | claude-sonnet-5-5 (default), claude-opus-5-5 | claude-haiku-5-5 |
| OpenRouter | anthropic/claude-sonnet-5.5 (default), anthropic/claude-opus-5.5, openai/gpt-5.5, google/gemini-3.5-flash, google/gemini-3.1-pro-preview | anthropic/claude-haiku-5.5, openai/gpt-5.4-mini or google/gemini-3.5-flash, matching the model's family |
OpenRouter gives you one key for Claude, GPT and Gemini models. Instead of pasting a key, you can select Sign in with OpenRouter in the key dialog. OpenRouter creates a key just for Vibr, which you can see, limit and revoke in your OpenRouter account.
The Plan step uses a faster model from the same provider. If your key can't use it, the model you chose plans instead. Each model also has a backup from the same provider that steps in when it's busy or out of quota; see How a run works.
Gemini's free tier works with the Flash models. Pro models need billing turned on in Google AI Studio.