
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
@onbeam/ui
Advanced tools
A collection of all UI components styled using the Beam design system. For an overview of all UI components click [here](https://packages.onbeam.com/).
A collection of all UI components styled using the Beam design system. For an overview of all UI components click here.
For an example project, check out the starter template repository. This project already has everything set up in a minimal way. If it suits your use-case, use that repository as a template for your new project. This will save you some time implementing the required packages.
In order to use the UI library, you have to install a few packages:
pnpm add @onbeam/ui@latest @onbeam/styled-system@latest
pnpm add @pandacss/dev@latest --save-dev
Note: It's also possible to only use the styled-system without the UI library.
Icons are optional. If you need them, you can install them with the following command:
pnpm add @onbeam/icons@latest
To keep all @onbeam
packages updated, you can use the CLI:
npx @onbeam/cli update -d [directory]
If you're using TailwindCSS alongside Beam UI (PandaCSS) within your application, check out this example repository for the documentation on how to combine these two packages.
This package is fully tree-shakable, ensuring that only the UI components you import are included in your final bundle, optimizing your app's performance.
Due to the component styles building just-in-time, you need to install and configure PandaCSS. This means that only the styles for the components you use will be generated, nothing more. When you decide to utilize PandaCSS in your own project, you will be able to use all design tokens and PandaCSS will combine the UI styles with your project styles before compiling the output.
Create a panda.config.ts
file in the root of your application and paste this snippet in there:
import { defineBeamUiConfig } from "@onbeam/styled-system/config";
export default defineBeamUiConfig({
include: [
"./node_modules/@onbeam/ui/dist/panda.buildinfo.json",
// TODO: Configure this line to target your own files that utilize the component library and PandaCSS
"./src/**/*.{ts,tsx}",
],
});
Run npx panda init --postcss
. This will create a postcss.config.cjs
file in the root of your application with the following code:
module.exports = {
plugins: {
"@pandacss/dev/postcss": {},
},
};
To enable the styles, create a global CSS file, for example named "globals.css
" and paste the following snippet in there:
/* When adding libraries that could overwrite our styles, make sure to use css layers: */
/* https://panda-css.com/docs/overview/faq#how-can-i-prevent-other-libraries-from-overriding-my-styles */
@layer reset, base, tokens, recipes, utilities;
body {
font-family: var(--beam-fonts-main);
color: var(--beam-colors-mono-100);
}
/* TODO: These are all fonts used in the @onbeam/ui components. Add all your used fonts here */
@font-face {
font-family: "Suisse Intl";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../node_modules/@onbeam/ui/dist/fonts/SuisseIntl-Regular.otf");
}
@font-face {
font-family: "Suisse Intl";
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../node_modules/@onbeam/ui/dist/fonts/SuisseIntl-Book.otf");
}
/* TODO: Remove this if you're not using the `ObjectTree` component */
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../node_modules/@onbeam/ui/dist/fonts/JetBrainsMono-Regular.ttf");
}
In the root of your project code, for example layout.tsx
or _app.tsx
, import your created css file:
import "./globals.css";
To build the PandaCSS code, add the panda codegen
command to your package.json
's build script. For example:
"scripts": {
"build": "panda codegen && next build",
},
@onbeam
packagesThat's it! Happy coding! 🌈
FAQs
A collection of all UI components styled using the Beam design system. For an overview of all UI components click [here](https://packages.onbeam.com/).
The npm package @onbeam/ui receives a total of 916 weekly downloads. As such, @onbeam/ui popularity was classified as not popular.
We found that @onbeam/ui 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.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.