defuss-ui

A modern Shadcn-like component library for defuss that build on Tailwind and Franken UI.

defuss-ui is a modern UI component library for web apps that suits defuss perfectly. It builds on Tailwind CSS and Franken UI. It provides a set of reusable, customizable, and accessible UI components that can be easily integrated into your defuss projects.

As a prerequisite, you need to set-up Tailwind CSS and Franken UI in your defuss project. Please refer to the official documentation of Tailwind CSS and Franken UI for installation instructions.

Then, you can install defuss-ui via npm or yarn:

pnpm install defuss-ui
# or
npm install defuss-ui
# or
yarn add defuss-ui

You can import and use the components from defuss-ui in your defuss project as follows:

import { Button, Card, Modal } from "defuss-ui";

function App() {
  return (
    <div>
      <Card>
        <h2 className="text-xl font-bold mb-4">Welcome to defuss-ui</h2>
        <p className="mb-4">This is a simple card component.</p>
        <Button onClick={() => alert("Button clicked!")}>Click Me</Button>
      </Card>

      <Modal isOpen={true} onClose={() => {}}>
        <h2 className="text-xl font-bold mb-4">Modal Title</h2>
        <p>This is a modal component.</p>
      </Modal>
    </div>
  );
}