@scalar/components
Advanced tools
Scalar Components provides a library of components used across Scalar products. The library is designed to work seamlessly with our theming system and includes a scoped copy of the themes reset, base variables and colors.
Want to explore the components? Check out the Storybook for a live demo.
pnpm i @scalar/components
Because many Scalar applications are embedded into other websites the components reset and styles are scoped to the scalar-app class. This means you need to add this class to the root element of your application where you want the to use the components. If you are using the components in a standalone application, you can just add this class to the body element.
<body class="scalar-app">
<!-- Use components in here -->
</body>
To get started, import the CSS styles in your main setup file (e.g., main.ts, index.ts, or App.vue):
import '@scalar/components/style.css'
Then, you can use the components in your Vue components. For example:
<script
setup
lang="ts">
import { ScalarIcon } from '@scalar/components'
</script>
<template>
<ScalarIcon
icon="Logo"
size="lg" />
</template>
Most components can be customized using props. For example, the ScalarIcon component can be customized with the size prop to change the size of the icon.
<ScalarIcon
icon="Logo"
size="lg" />
However, sometimes you need to override the default styles. Most components (soon to be all) use the useBindCx function to apply the Tailwind classes to the component. The function intelligently merges the component's classes with the provided classes allowing you to override preset classes.
<!-- An icon you need to be really big -->
<ScalarIcon
icon="Logo"
class="size-24" />
This will apply the size-24 class to the icon and remove the size-full class that would normally be applied by default. For more information see the useBindCx function.
The component library includes a number of floating components including the ScalarPopover, ScalarDropdown, and ScalarListbox as well as a ScalarFloating primitive. All of the components use Floating UI under the hood and provide the same for interacting with the Floating UI API.
When using the floating components the default slot renders reference / target element (e.g. a button) and a named slot renders the floating element (e.g. a menu). For example:
<ScalarPopover>
<!-- Reference element -->
<ScalarButton>Open</ScalarButton>
<template #popover>
<!-- Floating element -->
</template>
</ScalarPopover>
Since you can directly target the reference element with Tailwind classes any classes applied to the base component will be applied to the floating element (using useBindCx under the hood). For example:
<!-- Will apply the class `w-48` to the floating element (the popover) -->
<ScalarPopover class="w-48">
<!-- Will apply the class `w-full` to the reference element (the button) -->
<ScalarButton class="w-full">Open</ScalarButton>
<template #popover> ... </template>
</ScalarPopover>
The components package uses the same CSS Layers as the themes package to apply the theme styles. For more information see the themes README.
All pull requests should include the following checklist:
## Component Checklist
- [ ] Exported from `@scalar/components`
- [ ] Has JSDocs for all:
- [ ] Components (with examples)
- [ ] Props
- [ ] Slots
- [ ] Emits
- [ ] Functions
- [ ] Types
- [ ] Allows overriding of Tailwind classes where applicable (see useBindCx)
- [ ] Has stories showcasing any applicable variants
- [ ] Has unit tests covering any applicable interactions
FAQs
Scalars component library
The npm package @scalar/components receives a total of 36,665 weekly downloads. As such, @scalar/components popularity was classified as popular.
We found that @scalar/components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.