@new-black/lyra

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;
  }
}

// Some root component
import { Provider } from "@new-black/lyra";
import "./index.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.