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.
See the Figma file for design documentation.
Soon we plan to move docs over to dev.bibleio.com/design/docs.
Install the module:
# pnpm
pnpm add @bibleio/design
# yarn
yarn add @bibleio/design
# npm
npm install @bibleio/designAdd 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 stylesWe use Lora for our main font.
Here are guides to setup fonts based on your framework.
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],
},
},
};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>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-monoImport 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.
The spacing system is literal, so p-32 means exactly 32px.
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" />Look at the releases.
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:
