DesignKit Documentation Website

This repository contains the documentation site for DesignKit, a powerful hard fork of Shoelace that integrates Tailwind CSS and Shadcn UI design patterns.

About DesignKit

DesignKit combines the best of:

• Shoelace's Web Components: A solid foundation of framework-agnostic components
• Tailwind CSS: Utility-first styling for unlimited design flexibility
• Shadcn UI: Modern design patterns and component architecture

The result is a powerful, flexible component library that works with any framework or vanilla JavaScript.

Documentation Structure

This documentation site is built with Jekyll and uses the following structure:

• /_components: Component documentation
• /_docs: Core documentation and guides
• /_frameworks: Framework integration guides
• /_tutorials: Step-by-step tutorials
• /_resources: Additional resources
• /_includes: Reusable Jekyll templates
• /assets: Static assets like images and CSS

Development

Prerequisites

• Ruby 3.0+
• Bundler
• Node.js 14+

Local Development

1. Clone this repository
2. Install dependencies:

   bundle install

3. Start the development server:

   bundle exec jekyll serve

4. Visit http://localhost:4000 in your browser

Building for Production

To build the site for production:

JEKYLL_ENV=production bundle exec jekyll build

The compiled site will be in the _site directory.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This documentation is licensed under the MIT License.

A Better Web Initiative Project

About

This repository contains the source code for the DesignKit UI website. The site serves as comprehensive documentation for the DesignKit UI component library, featuring component demos, API references, and guides.

Technology Stack

• Built with 11ty - a simple yet powerful static site generator
• Uses Nunjucks for templating
• Custom markdown processing with enhanced syntax for component demos
• Search functionality powered by Lunr
• Automatically generated documentation from component metadata

Project Structure

• _includes/ - Layout templates and partials
• _utilities/ - Helper functions and utilities for the build process
• assets/ - Static assets like images, CSS, and JavaScript
• pages/ - Content pages organized by sections
  • components/ - Individual component documentation
  • getting-started/ - Installation and usage guides
  • frameworks/ - Framework integration guides
  • tokens/ - Design token documentation
  • tutorials/ - Step-by-step tutorials and examples
  • resources/ - Additional resources and information

Development

Prerequisites

• Node.js 16 or higher
• npm, yarn, pnpm, or bun package manager

Getting Started

1. Clone this repository:

git clone https://github.com/better-web-initiative/designkit-website.git
cd designkit-website

2. Install dependencies:

npm install
# or
yarn
# or
pnpm install
# or
bun install

3. Start the development server:

npm run start
# or
yarn start
# or
pnpm start
# or
bun run start

4. Visit http://localhost:4000 in your browser

Building for Production

To build the site for production:

npm run build
# or
yarn build
# or
pnpm build
# or
bun run build

The built site will be available in the _site directory.

Contributing

We welcome contributions to improve the documentation, fix bugs, or enhance the site. To contribute:

1. Fork this repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please read our Code of Conduct before contributing.

Adding New Component Documentation

When adding documentation for a new component:

1. Create a new markdown file in the pages/components/ directory
2. Use the front matter to define metadata
3. Follow the existing documentation pattern for consistency

Example:

---
title: Button
description: A versatile button component with multiple styles and states.
---

# Button

Buttons represent actions that users can take.

## Examples

```html:preview
<kit-button>Default Button</kit-button>
<kit-button variant="primary">Primary Button</kit-button>

API Reference

...

## License

This project is licensed under the AGPL-3.0 License - see the LICENSE file for details.

---

<div align="center">
  <p>Built with ❤️ by the <a href="https://better-web.org">Better Web Initiative</a> for the future of web development.</p>
  <p>
    <a href="https://github.com/betterwebinit/designkit/stargazers">⭐ Star us on GitHub</a> •
    <a href="https://twitter.com/BetterWebInit">🐦 Follow us on Twitter</a> •
    <a href="https://better-web.org">🌐 Visit our website</a>
  </p>
</div>