Debord Design Components

An elegant and modern open-source UI component library for React, designed to accelerate your development process and help you build beautiful, consistent interfaces with ease. Debord Design offers a comprehensive set of customizable components, seamless integration with TailwindCSS, and a focus on accessibility and developer experience.

Live Storybook

Explore all components and their usage examples in the interactive Storybook:

https://debord-design.debord-services.com/

Installation

Install the package using npm:

npm i debord-design

Peer dependencies

This package requires the following peer dependencies:

• React >= 18.3.1
• ReactDOM >= 18.3.1
• TailwindCSS >= 4.3.0

If you don't have them yet, install with:

npm i react react-dom tailwindcss

CSS

Add this to your main CSS file:

@source "{root}/node_modules/debord-design/dist";

body {
  color-scheme: light dark;
}

@theme {
  --color-primary: #6200EE;
  --color-secondary: #f43f5e;
  --color-error: #d32737;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-dark: #222222;
  --color-light: #fffffe;
  --color-card: #ffffff;
  --color-card-dark: #1e1e1e;

  --shadow-vintage: 6px 6px 0px currentColor;
  --shadow-dark-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-dark-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-dark-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-light-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}

Basic usage

Import the components you need:

import { Button, Card } from "debord-design";

function App() {
    return (
        <Card>
            <Button>Click me</Button>
        </Card>
    );
}

Component props and customization

All components accept the standard HTML attributes of their underlying element via the ...props pattern. This means you can use any native attribute (such as onClick, className, style, etc.) or customize the component as needed. Additionally, you can combine these with any custom props provided by the component itself for further flexibility.

For example:

<Button className="my-custom-class" onClick={() => alert("Clicked!")} size="lg">
    Custom Button
</Button>;

This approach keeps the essence of the original HTML element while allowing you to personalize and extend the component's behavior and appearance.

Example: Button component custom props

The Button component supports several custom props in addition to standard HTML button attributes:

• colors: Change the color scheme. Options: default, white, primary, secondary, success, error, warning.
• variant: Change the button style. Options: basic, fill, line, vintage.
• rounded: Control border radius. Options: none, sm, md, lg, full (see theme config).
• shadow: Add shadow style. Options: sm, md, lg, xl, vintage (see theme config).
• icon: Add a ReactNode as an icon, which will be rendered inside the button.

You can combine these props to create a wide variety of button styles. For example:

<Button
  colors="primary"
  variant="fill"
  rounded="lg"
  shadow="md"
  icon={<span role="img" aria-label="star">⭐</span>}
  onClick={() => alert('Primary button!')}
>
  Primary Button
</Button>

<Button colors="error" variant="vintage" shadow="vintage">
  Error Vintage
</Button>

You can also use your own className to further customize the appearance, and all native button attributes (like type, disabled, etc.) are supported.