npx brijr-craft@latest init
pnpm dlx brijr-craft@latest init
Or use the Starter template at starter.bridger.to
Watch the Demo video
brijr/craft is a Design System developed using one component file paired with the best design tools for Next.js. Craft was put together by Bridger Tower at 9d8 to build websites with NextJS, Tailwind, shadcn/ui, and TypeScript faster π
Try it out using brijr/components π
Layout and Spacing is handled by the components provided in craft.tsx
. You can use these components to build your layout. Here is an example of how to use the components:
import { Main, Section, Container } from "@/components/craft";
export default function Page() {
return (
<Main>
<Section>
<Container>
<h1>Heading</h1>
<p>Content</p>
</Container>
</Section>
</Main>
);
}
This will handling the vertical and horizontal spacing, the max-width of the container, and the padding of the container and typography spacing. You can also use the Article
component to handle the layout of an article as the max-width is a bit smaller for readability.
Check out the craft.tsx
file to see how the components are styled and make changes accordingly.
The Typography System is a modified version of Tailwind Typography. You can find how it is styled in the <Main />
and <Article />
component of the craft.tsx
file.
To manage fonts in your website/software I use Next.js Font Optimization. I prefer to use a variable font. Here is a video about how this works.
To manage the colors of your website brijr/craft uses the system by shadcn. You can see this in the app/globals.css
and you can make color changes accordingly. In order for this to work you use custom Tailwind styles such as text-primary
or bg-accent
etc. as defined in globals.css
. Example below:
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9;
}
}
By using this system it will also take care of dark mode coloring/styling. To add darkmode to your application add a theme provider and theme toggle.
To find color schemes check out this tool provided by shadcn: ui.shadcn.com/themes or ui.jln.dev.
-
Create a Next.js application and use Tailwind and Typescript
npx create-next-app@latest my-app --typescript --tailwind --eslint
-
Run this command to Install brijr/craft (this will also install shadcn/ui and all other dependencies)
npx brijr-craft@latest init
-
Add craft components to build you layout
import { Layout, Main, Section, Container, Article, } from "@/components/craft.tsx";
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. Built with Radix UI by shadcn. This handles the colors and the base components of brijr/craft.
Simple React Component That Makes Titles More Readable. React Wrap Balancer reduces the width of the content wrapper as much as it could, before causing an extra line break. When reaching the minimum width, each line will approximately have the same width, and look more compact and balanced.
There are currently five components
- Layout
- Main
- Section
- Container
- Article
The Layout
component serves as the foundational element that wraps around your application's structure. It sets up the basic layout and applies global styles.
Props:
children: React.ReactNode
- The content to be displayed within the layout.className?: string
- Optional CSS classes to customize the appearance.
Usage:
<Layout className="custom-class">{/* content here */}</Layout>
The Main
component is designed to be used as the primary content container within your application.
Props:
children: React.ReactNode
- The main content of your application.className?: string
- Optional CSS classes for styling.id?: string
- An optional ID for targeting or referencing the element.
Usage:
<Main className="custom-class" id="main-content">
{/* main content here */}
</Main>
The Section
component is intended for wrapping different sections of your application, providing a way to organize your content semantically.
Props:
children: React.ReactNode
- The content within this section.className?: string
- Optional CSS classes for styling.id?: string
- An optional ID for the section.
Usage:
<Section className="custom-section" id="unique-section">
{/* section content here */}
</Section>
The Container
component acts as a wrapper for your content, constraining its width and centering it within the layout.
Props:
children: React.ReactNode
- The content to be contained.className?: string
- Optional CSS classes for styling.id?: string
- An optional ID for the container.
Usage:
<Container className="custom-container" id="container-id">
{/* contained content here */}
</Container>
The Article
component is specifically designed for wrapping article or blog post content, ensuring it's properly styled and accessible.
Props:
children: React.ReactNode
- The article content.className?: string
- Optional CSS classes for styling.id?: string
- An optional ID for the article.
Usage:
<Article className="custom-article" id="article-id">
{/* article content here */}
</Article>
To use these components in your project, install the package via npm:
npx brijr-craft@latest init
You can import the components you need at the top of your React component file like so:
import {
Layout,
Main,
Section,
Container,
Article,
} from "@/components/craft.tsx";
Find a collection of components built with brijr/craft at componets.bridger.to