A blazing fast, future-proof library of web components built in vanilla JavaScript.
A Better Web Initiative Project
- Lightweight & high-performance ⚡
- Framework-agnostic - works with React, Vue, Angular, or no framework 🧩
- Works with CDNs for easy implementation 🚛
- Fully customizable with CSS 🎨
- Includes a beautiful dark theme 🌛
- Built with accessibility as a core principle ♿️
- Part of the Rustyll ecosystem for modern web development 🦀
- Open source 😸
DesignKit UI was born from the belief that web development should be:
- Simple but not simplistic: Components that solve complex UI challenges without adding complexity to your codebase.
- Fast by default: Performance should never be an afterthought. We optimize for speed at every level.
- Truly accessible: Accessibility isn't a checkbox—it's built into our DNA.
- Framework-agnostic: Your UI components shouldn't dictate your technology choices.
- Future-proof: Built on web standards that will stand the test of time.
As part of the Better Web Initiative, we're committed to making the web faster, more accessible, and more sustainable. We believe that by building tools that respect these principles, we can contribute to a web that works better for everyone.
DesignKit UI is a hard fork of DesignKit, redesigned from the ground up with a focus on performance, simplicity, and future-proof architecture. As part of the Rustyll family - a next-generation static site generator - DesignKit UI serves as the perfect companion for building modern, efficient web interfaces.
Unlike component libraries that lock you into specific frameworks or build tools, DesignKit UI uses web components—a set of standardized browser APIs—to provide truly reusable UI elements that work anywhere HTML runs.
npm install designkit-uiyarn add designkit-uipnpm add designkit-uibun add designkit-ui<!-- Import from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/designkit-ui/dist/themes/light.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/designkit-ui/dist/designkit.js"></script>
<!-- Use components -->
<kit-button variant="primary">Click me</kit-button>Or import as ES modules:
// Import specific components
import 'designkit-ui/dist/components/button/button.js';
// Or import everything
import 'designkit-ui/dist/designkit.js';- Tiny footprint: Core library under 50KB (minified and gzipped)
- No dependencies: Built on web standards with no external dependencies
- SSR-friendly: Works seamlessly with server-side rendering
- Tree-shakable: Import only what you need
- TypeScript: Full TypeScript support with accurate types
- Theme tokens: Comprehensive design tokens for consistent styling
- Form components: Rich set of accessible form controls
- Utility components: Layout, navigation, and feedback components
- Performance-first: Optimized for Core Web Vitals and runtime performance
- Customization API: Powerful but intuitive API for theming and extending components
DesignKit UI includes a comprehensive set of components:
- Buttons & Inputs
- Forms & Controls
- Layout & Structure
- Navigation
- Feedback & Alerts
- Data Display
- Media & Icons
- Utilities
Visit our documentation site for a complete list of components and usage examples.
Note: This roadmap is not exhaustive and may change based on community feedback and project priorities.
- Initial release and documentation
- Core components (buttons, inputs, modals)
- Theme system
- Accessibility audits
- Form components
- Data display components
- Animation system
- i18n support
- Advanced components (data tables, file uploads)
- Visual regression testing
- Component playground
- Framework adapters (React, Vue, Svelte)
- Design system integration tools
- Component generator
- Performance benchmarking tools
- Enterprise components
- AI-assisted customization
- Server components integration
- AR/VR component adaptations
- IoT interface components
Want to influence our roadmap? Open an issue with your suggestion!
DesignKit UI is designed to be easily customized using CSS custom properties:
:root {
--dk-color-primary: #3d7aed;
--dk-color-success: #2ecc71;
--dk-color-warning: #f39c12;
--dk-color-danger: #e74c3c;
--dk-border-radius-medium: 4px;
--dk-font-family-sans: 'Inter', sans-serif;
}DesignKit UI comes with several built-in theme presets:
light.css- Our default light themedark.css- Our elegant dark themesystem.css- Automatically follows system preferenceshigh-contrast.css- Optimized for accessibility
DesignKit UI supports all modern browsers, including:
- Chrome/Edge (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- iOS Safari (last 2 versions)
- Android Chrome (last 2 versions)
DesignKit UI is an open source project and contributions are welcome! To contribute:
- Fork the repository
- Clone your fork
- Install dependencies:
yarn install - Start the dev server:
yarn start - Submit a pull request with your changes
We have a Code of Conduct that all contributors are expected to follow.
# Start development server
yarn start
# Run tests
yarn test
# Build production version
yarn run buildTo scaffold a new component:
npm run create dk-component-nameyarn run create dk-component-namepnpm run create dk-component-namebun run create dk-component-nameDesignKit UI is part of Better Web Initiative:
- Rustyll SSG: Ultra-fast static site generator built for the future
- DesignKit UI: Web component library (this project)
DesignKit UI is available under the AGPL-3.0 License.
Built with ❤️ by the Better Web Initiative for the future of web development.
⭐ Star us on GitHub • 🐦 Follow us on Twitter • 🌐 Visit our website
DesignKit uses Twind for styling, which is a small compiler that converts Tailwind classes into CSS rules at runtime. This provides all the benefits of Tailwind CSS without the need for a build step.
Components use Shadow DOM for style encapsulation, and Twind is integrated to work properly with Shadow DOM using the @twind/with-web-components package.
DesignKit exposes a rich set of CSS custom properties for theming. Refer to the documentation for details on available custom properties.