Radica UI is (or more accurately, will be!) an in-development set of ultra-modern, lightweight, SSR'able web components for your next futuristic project.
Radica exists to explore a slightly different design space than other web component design systems. Radica intends to be very opinionated, cutting-edge, and slightly experimental.
Radica uses the best practices to build components for browsers with modern standards, such as:
- ES2024
- CSS Module Scripts
- Scoped Custom Element Registries
- Form-Associated Custom Elements
- Invoker Commands
- HTML Dialogs and Popovers
- CSS Nesting, Anchor Positioning, containment, style queries, custom functions, and more...
Because of this, browser support may be much more limited than what you're used to, or what you need. If so, that's ok. Radica might not be for you yet. Browsers will either catch up to Radica, or Radica will add build steps and polyfills for wider compatibility.
Radica is inspired by Shadcn/ui, Shoelace, and Adobe Spectrum among others.
Radica aims to have a look and feel similar to the very popular Shadcn/ui, and be able to function similarly for cross-framework use cases.
- Build a reference set of Lit components for humans and computers to learn Lit and web components best practices from
- Explore the use of bleeding-edge web platform features
- Focus on efficiency by using minimal DOM elements and CSS
- Build and use utilities that could be up-streamed to Lit or Web Components Community Group community protocols, or split out into standalone packages
- Exercise Lit SSR across an entire component set
- Create a forkable base for new design system projects
- Implement a Shadcn/ui style component set with web components
- Explore the design space for composing a design system from layouts, components, utility styles, and atomic tokens
This monorepo contains several packages:
- @radica/base - RadicaElement base class, styles, icon registry, and utilities.
- @radica/ui - Core UI components (buttons, checkboxes, icons, etc.)
- @radica/bootstrap-icons - Bootstrap Icons as Lit-based web components
- @radica/site - Documentation website
- @radica/site-client - Client-side code for the documentation site
Don't. Radica isn't ready.
- Node.js 24+
- npm 11+
# Clone the repository
git clone https://github.com/elematic/radica.git
cd radica
npm ci
# Build all packages
npm run build --watch
# Start development server in another terminal
# Note: currently the Wireit config is not working properly for watch mode,
# thus the separate `build --watch` process.
npm start -w @radica/siteSee DESIGN.md for design notes for Radica.
Radica support is only currently developed on the latest stable Chrome.
Other browsers will be supported by either waiting for them to implement any missing features that Radica uses, or addressing gaps with workarounds and polyfills once Radica is actually closer to stable.
We welcome contributions! Please see our Contributing Guide for details on:
- Code of conduct
- Development workflow
- Coding standards
- Submitting pull requests
MIT License - see the LICENSE file for details.
- Documentation (coming soon)
- GitHub Repository
- NPM Organization
Built with ❤️ by Elematic Software, Inc.