@new-black/lyra v1.0.3
Lyra - Design System
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.
Features
- Pre-defined UI components such as buttons, accordions, modals, etc.
- Consistent typography, colors, and spacing guidelines, we use Tailwind for that.
- Accessibility considerations implemented by default (react-aria).
- Theming capabilities to match various branding requirements.
Installation
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;
}
}
Icons
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:
- Reduced HTTP requests: SVG sprites allow multiple icons to be combined into a single file. This eliminates the need for separate HTTP requests for each individual icon, resulting in faster page loading times.
- Scalability: SVG icons are vector-based, meaning they can be scaled up or down without losing quality. With an SVG sprite, you have access to a collection of scalable icons.
- Ease of use: By using an SVG sprite, you can reference specific symbols within the sprite using their IDs. This makes it simple to insert and style icons within your HTML or CSS.
- Efficient caching: When an SVG sprite is used, it can be cached by the browser, allowing subsequent page loads to utilize the cached sprite. This improves performance and reduces bandwidth usage.
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>
);
};
Usage
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.
Roadmap
Our future plans for Lyra include:
- Adding more components and design elements.
- Enhancing documentation with usage examples and guidelines.
Please note that this roadmap is subject to change as the project evolves.
2 days ago
8 days ago
15 days ago
16 days ago
16 days ago
19 days ago
19 days ago
22 days ago
23 days ago
23 days ago
23 days ago
24 days ago
24 days ago
25 days ago
26 days ago
26 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
5 months ago
5 months ago
7 months ago
7 months ago
7 months ago
10 months ago
7 months ago
7 months ago
10 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
6 months ago
7 months ago
9 months ago
10 months ago
7 months ago
10 months ago
9 months ago
7 months ago
8 months ago
10 months ago
9 months ago
7 months ago
10 months ago
7 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago