Skip to main content
Tw Twintrinsic
  • Getting Started
  • Components
  • Theming
  • Completion
Examples
Data Dashboard Game Map
Core
App
Layout
Accordion AccordionItem Card Container Panel Separator Sidebar Splitter
Navigation
AppHeader BottomBar Breadcrumb BreadcrumbItem Menu MenuItem Tabs Tab TabList TabPanel TreeMenu
Data Display
Avatar AvatarGroup Badge Carousel CarouselItem Chip ChipGroup CodeBlock CodeBlockSpeed CodeEditor DataTable Map Progress Skeleton Table TableBody TableCell TableHead TableHeader TableRow Tag TagGroup Timeline TimelineItem Tooltip Tree TreeNode
Metrics
DonutChart PieChart LineChart BarChart HorizontalBarChart AreaChart StatsCard MetricGrid KPICard GaugeChart ProgressMetric MetricTrend
Form
AutoComplete Button ButtonGroup Calendar Checkbox ColorPicker Combobox Dropdown FileUpload FloatLabel Form FormField Input InputSwitch InvalidState Knob ListInput Listbox NumberInput Radio RadioGroup Rating Select SelectGroup Slider Switch TextInput Textarea
Feedback
Modal Stepper StepperStep Toast
Utility
Icon Lazy LazyPanel Masonry ThemeToggle

Components

Twintrinsic provides a set of accessible, customizable components built with Svelte 5 and Tailwind CSS. Each component is designed to be responsive and follows best practices for accessibility.

Layout

Application header with navigation, search, and user menu

Collapsible side panel with customizable content

Collapsible bottom panel with customizable content

Responsive container with consistent padding

Navigation

Accessible dropdown menu with customizable items

UI Elements

Collapsible content panel with header and footer slots

Visual divider with optional content