@carclarity/ui v0.6.0

CarClarity UI

CarClarity UI is a React-based design system that simplifies the development of consistent, themed UI components. Currently, the library includes a customizable Button component with top-level theming support.

Installation

Install the package using your preferred package manager:

Using npm:

npm install carclarity-ui

Using yarn:

yarn add carclarity-ui

Setup

Wrap your application with the ThemeProvider to provide theme context to the components:

import React from "react";
import ReactDOM from "react-dom/client";
import { ThemeProvider } from "carclarity-ui";

const theme = {
  buttons: {
    primary: "bg-blue-500 text-white rounded hover:bg-blue-600",
    secondary: "bg-gray-300 text-black rounded hover:bg-gray-400",
  },
};

ReactDOM.createRoot(document.getElementById("root")!).render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
);

Components

Button

The Button component provides a customizable button element with support for variants, sizes, and additional props.

Usage

import React from "react";
import { Button } from "@carclarity/ui";

const App = () => {
  return (
    <div>
      <Button variant="primary" size="medium">
        Primary Button
      </Button>
      <Button variant="secondary" size="large" onClick={() => alert("Clicked!")}>
        Secondary Button
      </Button>
    </div>
  );
};

export default App;

Props

Theming

You can define your custom theme using the ThemeProvider. Below is an example structure for the theme:

const theme = {
  buttons: {
    primary: "bg-blue-500 text-white rounded hover:bg-blue-600",
    secondary: "bg-gray-300 text-black rounded hover:bg-gray-400",
  },
};