- Advanced Toast
- ArrowButton
- Arrows
- Avatar
- Backdrop
- Basic Toast
- Breadcrumb
- Button
- CardBackground
- Card
- ChatButton
- Checkbox
- Checkboxes
- Chip
- ChoiceExpander
- Clickable
- Date Field
- Dropdown
- ElasticHeight
- ExpandableCard
- Filter
- FormCheckbox
- Form Control
- Form Label
- HamburgerIcon
- Heading
- Image
- Link
- Loader
- Number Field
- Pagination
- Password
- Phone Field
- Popin
- Portal
- Prose
- Radio Group
- Radio
- Range
- Select
- SidebarLayout
- Spinner
- Switch
- Tabs
- Tag
- TextField
- ValidationMessage
Trident UI
Introduction
Trident UI is a component library focused on niche, purpose-built components for real product use cases in the Club Med ecosystem.
You can adopt it in two ways: through the shadcn registry to keep and customize component code directly in your repository, or as a ready-to-use npm package (@clubmed/trident-ui) with managed versioning.
Two installation modes
Trident UI can be installed in two modes, depending on how you want to work:
- shadcn registry mode: for teams that want to manage the component code directly in their own repository via shadcn.
- Classic package mode (NPM) with
@clubmed/trident-ui: for teams that want a ready-to-use package and a versioning/release cycle maintained through npm.
Choose your setup guide:
Setup with shadcn to keep and adapt component code directly in your repository.
Setup (NPM package) for a ready-to-use dependency and npm-managed versioning.
Add a component with shadcn
To add a component from the Trident UI registry with shadcn:
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/button.json
For complete shadcn setup (alias, components.json, and troubleshooting), see Setup with shadcn.
Designed to Complement, Not Replace
Trident UI is not intended to replace the beautiful component libraries you're already using. Instead, we're designed to complement your existing toolkit by providing specialized components that aren't commonly found elsewhere.
We recommend using Trident UI alongside your core component library - whether that's shadcn/ui, 8bitcn, magicui or any other library you prefer. Use their components for buttons, forms, and layouts, then enhance your application with our niche components for specific use cases like transport badges, specialized status indicators, and domain-specific widgets.
Think of us as the specialized tools in your workshop - you still need your hammer and screwdriver, but sometimes you need that specific tool that makes a particular job much easier.