Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@new-black/lyra
Advanced tools
Note: This package is currently under development and should not be used in a production environment.
Lyra is a comprehensive design system aimed at providing consistent and reusable components, styles, and guidelines for building user interfaces. It is designed to streamline the UI development process and ensure a cohesive visual and interactive experience across all projects.
npm i @new-black/lyra
or
yarn add @new-black/lyra
// tailwind.config.ts
import { lyraPreset } from "@new-black/lyra";
export default {
content: [
...,
"./node_modules/@new-black/lyra/dist/**/*.{js,ts,jsx,tsx,mdx}",
]
presets: [lyraPreset],
...
} satisfies Config;
/** index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* Add your fonts there */
@font-face {
font-family: "Inter";
src: url("/fonts/inter-regular.ttf") format("truetype");
font-weight: 400;
}
/* set global styling */
* {
-webkit-font-smoothing: antialiased;
}
}
For the icons used in Lyra we use an SVG sprite. To copy the SVG sprite to your public folder, execute the following command in your terminal:
cp node_modules/@new-black/lyra/dist/icons public
SVG sprites are a convenient way to use icons in web development. Here's why they are nice to use:
Overall, SVG sprites offer a lightweight, flexible, and performant solution for incorporating icons into web projects.
// Some root component
import { Provider } from "@new-black/lyra";
import "./index.css";
import "@new-black/lyra/dist/style.css";
export const Root = () => {
return (
<Provider locale="en">
<App />
</Provider>
);
};
Once installed, you can import Lyra components and styles into your project:
import { Button, Accordion } from "@new-black/lyra";
Check out the documentation (not yet available) for a detailed guide on using and customizing Lyra.
Our future plans for Lyra include:
Please note that this roadmap is subject to change as the project evolves.
FAQs
Stylable design system based on tailwind and react-aria.
We found that @new-black/lyra 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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.