DOCSEARCHbyAlgolia
Submit Docs

brijr/components

repository·main·Indexed 19 days ago

https://github.com/brijr/components

An open-source collection of type-safe React components for rapid website building with Next.js. The library leverages Tailwind CSS, shadcn/ui, and brijr/craft for styling and layout. It can be initialized via the craft-ds CLI or by using the brijr/starter template.

Tokens
724
Snippets
3
Records
6
Agent score
68%

What's inside brijr/components

  1. Set up brijr/components in a Next.js project

    main

    To use brijr/components, you must first initialize a Next.js application with shadcn/ui. Then, you must include the craft.tsx component in your project to provide the necessary layout utilities for the component library to function correctly.

    # Step 1: Initialize Next.js with shadcn/ui
pnpx shadcn@latest init

# Step 2: Copy craft.tsx into your project's /components folder
# (Manual step: download craft.tsx from the repository)

  3. Set up brijr/components in a Next.js application

    main

    To use brijr/components, you need to initialize a Next.js application and then use the craft-ds CLI to install the component foundation (which includes shadcn/ui).

    1. Create a Next.js application

    Run the following command to create a new Next.js project with TypeScript, Tailwind CSS, and ESLint:

    npx create-next-app@latest my-app --typescript --tailwind --eslint

    2. Install craft-ds

    Navigate to your project directory and run the craft-ds initialization command. This installs the necessary dependencies and shadcn/ui components:

    npx craft-ds@latest init

    3. Add components

    Once initialized, you can copy and paste components directly from the brijr/components website into your project's component folder to start building.

    npx create-next-app@latest my-app --typescript --tailwind --eslint
npx craft-ds@latest init

  6. Use the cn utility to merge Tailwind CSS classes

    main

    The cn utility is used to conditionally merge Tailwind CSS classes. It combines clsx for handling conditional logic (e.g., isActive && 'text-blue-500') and tailwind-merge to ensure that conflicting Tailwind classes are resolved correctly (e.g., ensuring p-4 overrides p-2 when both are present).

    Import cn from lib/utils to use it in your components.

    import { cn } from "lib/utils";

// Example usage:
const className = cn(
  "base-classes",
  isTrue && "conditional-class",
  "override-class"
);