Getting Started
Components
- 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
Once Trident UI is installed, usage depends on your installation mode.
shadcn registry mode
In shadcn mode, component files are added to your repository and imported from your local alias:
import { Button } from '@/components/ui/button'
export default function Page() {
return (
<div className="p-8">
<Button>Book now</Button>
</div>
)
}package manager mode
In package manager mode, import directly from @clubmed/trident-ui:
import { Button } from '@clubmed/trident-ui/ui/buttons/Button'
export default function Page() {
return (
<div className="p-8">
<Button>Book now</Button>
</div>
)
}Need setup help first?