Glyphwald is a React + ShadCN UI component library designed to streamline development with Vite, TypeScript, and Tailwind CSS. Built and maintained by Structured Labs and used for designing Preswald, it provides customizable UI components for modern web applications.

npm package

Install Glyphwald via npm:

npm i glyphwald

Or with Yarn:

yarn add glyphwald

Import and use components in your project:

import { Button } from "glyphwald";

export default function App() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <Button variant="default" size="lg">Click Me</Button>
    </div>
  );
}

Glyphwald relies on Tailwind CSS. Ensure your project has it configured.

1. Install Tailwind CSS:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

2. Update tailwind.config.js:

   module.exports = {
     content: [
       "./index.html",
       "./src/**/*.{js,ts,jsx,tsx}",
       "./node_modules/@structuredlabs/glyphwald/dist/**/*.js"
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   };

3. Ensure src/index.css includes:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

To update Glyphwald to the latest version:

npm update glyphwald

npm run storybook