BDMG UI

BDMG UI

A production-ready component library for landing pages and forms. Built with React, Tailwind CSS, and full theme support (light/dark).

Getting started

Steps to use

  1. Add the workspace package to your app: @workspace/ui (in this monorepo it is already in package.json).
  2. Import the global styles in your root layout: import "@workspace/ui/globals.css".
  3. Import components from @workspace/ui/components/<component-name> (e.g. button, navbar, text-input).
  4. Use the component with the props described in each component page; see the Props table and examples.
tsx
import "@workspace/ui/globals.css"
import { Button } from "@workspace/ui/components/button"

export default function Page() {
  return <Button type="1" variant="default">Click me</Button>
}

Documentation

For UI components use @workspace/ui. For UTM params and TrustedForm cert URL use @workspace/lp-core.

LP Core

Components

Theming

All components use CSS variables from globals.css. Use the .dark class on a parent (e.g. html) to switch to dark mode. Buttons, inputs, and progress bars accept optional backgroundColor and foregroundColor for one-off overrides.