@bibleio/design
TypeScript icon, indicating that this package has built-in type declarations

2.2.1 • Public • Published

Banner

Design version 1.4.0 - Library version 2.2.1

UI kit for Bibleio, including React components and Tailwind configuration with color styles.

Built with Radix Primitives, other accessible React primitives, and Tailwind CSS.

Report issues or suggestions in this GitHub repo or in the Discord.

Documentation

See the Figma file for design documentation.

Soon we plan to move docs over to dev.bibleio.com/design/docs.

Installation

Install the module:

# pnpm
pnpm add @bibleio/design
# yarn
yarn add @bibleio/design
# npm
npm install @bibleio/design

Add Tailwind style preset:

// tailwind.config.ts
// Snippet of what to add
import { bibleioTheme } from '@bibleio/design'; // Add import

const config: Config = {
  presets: [bibleioTheme], // Add preset
};

Import main styles in your main layout:

import '@bibleio/design/dist/index.css'; // Import styles

Setup fonts

We use Lora for our main font.

Here are guides to setup fonts based on your framework.

Next.js (plus JetBrains Mono)

Skip to the next section if you don't need JetBrains Mono.

Import Google fonts in layout.tsx:

import { Lora, JetBrains_Mono } from 'next/font/google'; // Import fonts

const lora = Lora({ subsets: ['latin'], variable: '--font-lora' });

const jetBrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-jetbrains-mono',
});

Set css variables in your main body layout:

<body className="{`${lora.variable}" ${jetBrainsMono.variable}`}></body>

In tailwind.config.ts override the default font theme to add variables:

import defaultTheme from 'tailwindcss/defaultTheme'; // Add default theme import

const config: Config = {
  presets: [bibleioTheme],
  theme: {
    fontFamily: {
      serif: ['var(--font-lora)', ...defaultTheme.fontFamily.serif],
      mono: ['var(--font-jetbrains-mono)', ...defaultTheme.fontFamily.mono],
    },
  },
};

Next.js (just Lora)

Import Google fonts in layout.tsx:

import { Lora } from 'next/font/google'; // Import fonts

const lora = Lora({ subsets: ['latin'] });

Set main font as Lora in your main layout (layout.tsx):

<body className="{`${lora.classname}`}"></body>

Astro / Any other framework that supports Fontsource

Feel free to get rid of JetBrains Mono if you don't plan on using it.

Install Fontsource fonts:

# pnpm
pnpm add @fontsource/lora @fontsource/jetbrains-mono
# yarn
yarn add @fontsource/lora @fontsource/jetbrains-mono
# npm
npm install @fontsource/lora @fontsource/jetbrains-mono

Import in your main layout (Astro as an example):

---
// Layout.astro
import "@fontsource/lora/*";
import "@fontsource/jetbrains-mono/*";
---

No extra Tailwind config is needed for Fontsource.

Tailwind

The spacing system is literal, so p-32 means exactly 32px.

Dark Mode Switcher

We provide a ThemeSwitcher component for you, which is ready to use with localStorage right out of the box. Simply just add it to your code somewhere.

[!WARNING]
If you're using the componment with Astro or another framework where it renders on the server, make sure the component runs on the client. Astro example:

<ThemeSwitcher client:only="react" />

Changelog

Look at the releases.

License

All of Bibleio's projects are licensed under the MIT No Attribution license. You can copy, translate, modify, and distribute this resource, without restriction, and without needing to ask permission. Why? For the sake of the gospel (Matt 10:8).

Check out why you should do the same by clicking this:

Freely given, no conditions!

Package Sidebar

Install

npm i @bibleio/design

Weekly Downloads

7

Version

2.2.1

License

MIT-0

Unpacked Size

398 kB

Total Files

11

Last publish

Collaborators

  • dukc