Twintrinsic

A tailwind-based collection of svelte components.

WTF is Twintrinsic?

I got this idea during the christmas break of 2022 when I was looking for a new UI library that was flexible enough to allow me to extend it in ways I wanted and had good accessibility support. After combing through a bunch, I got the idea to try to create a small lib that was basically extensions of HTML. Since HTML elements already have basic accessibility built-in, it's a no-brainer to use these instead of fancy custom elements. I also wanted to use Tailwind for its themeability and easy customization. HTML in intrinsic to the web and tailwind is an extension, so i got tailwind + intrinsic = twintrinsic.

Performance

I am not going to worry about performance for now. I am going to use available HTML and CSS as much as possible, without using Javascript for interactivity unless absolutely necessary. This should keep the compiled bundle pretty performant. My main focus is going to be on code readability, accessibility, and extensibility.

Components:

This is in order of hierarchy.

Layout & Containers

• Container - Responsive layout wrapper for organizing page content

  • Panel - Flexible container with optional header and collapsible content
    • Sidebar - Fixed or sliding panel that attaches to the side of parent
    • BottomBar - Navigation bar anchored to the bottom of the viewport
    • Accordion - Expandable/collapsible sections with one active at a time
    • Card - Elevated container for grouping related content
    • Lazy - Deferred content loading when card becomes visible
    • Hero - Large banner section for prominent messaging
  • AppHeader - Top navigation bar for application header
  • App - Root application wrapper with layout management
    • Split - IDE-style resizable panels with drag-to-resize dividers

• Separator - Visual divider (horizontal/vertical) with optional text or icon

Form Components

• Input - Base text input with validation and floating labels
• TextInput - Extended text input with masking support
• Textarea - Multi-line text input with auto-resize
• Checkbox - Accessible checkbox with configurable states and icons
• Radio - Single-select radio button
• RadioGroup - Group of radio buttons with unified state
• Switch - Toggle switch component
• Select - Dropdown select with option groups
• Combobox - Searchable select with filtering
• AutoComplete - Input with autocomplete suggestions
• Dropdown - Dropdown menu with cascading support
• Listbox - Scrollable list of selectable items
• ListInput - Multiple value input with removable chips
• NumberInput - Numeric input with increment/decrement controls
• Slider - Range slider with min/max values
• Knob - Circular progress slider for rotational input
• Rating - Star or icon-based rating input
• ColorPicker - Color selection with hex/RGB input
• Calendar - Date picker with month/year navigation
• FileUpload - File input with drag-and-drop support
• FloatLabel - Label that floats above input on focus
• Form - Form wrapper with validation handling
• FormField - Form field wrapper with label and error display
• InputSwitch - Toggle switch variant
• InvalidState - Error state display for form fields

Data Display

• DataTable - Sortable, filterable table with pagination
• Table - Semantic HTML table with styling
• TableHeader - Table header row
• TableBody - Table body wrapper
• TableRow - Table row
• TableCell - Table cell
• Carousel - Image/content carousel with navigation
• CarouselItem - Individual carousel slide
• Timeline - Vertical or horizontal timeline display
• TimelineItem - Individual timeline event
• Tree - Hierarchical tree view with expand/collapse
• TreeNode - Individual tree node

Navigation & Menus

• Button - Primary action button with variants
• ButtonGroup - Grouped buttons with unified styling
• Breadcrumb - Navigation breadcrumb trail
• BreadcrumbItem - Individual breadcrumb item
• Menu - Dropdown menu with items
• MenuItem - Individual menu item
• Tabs - Tab navigation with panels
• Tab - Individual tab
• TabList - Tab list container
• TabPanel - Tab panel content

Feedback & Overlays

• Modal - Dialog modal with backdrop
• Tooltip - Hover tooltip with positioning
• Toast - Notification toast messages
• Progress - Linear progress bar
• Skeleton - Loading skeleton placeholder
• Stepper - Step indicator for multi-step processes
• StepperStep - Individual stepper step

Misc & Utilities

• Avatar - User avatar with initials or image
• AvatarGroup - Group of avatars with overlap
• Badge - Small label/badge component
• Chip - Small removable tag/chip
• ChipGroup - Group of chips
• Tag - Label tag component
• TagGroup - Group of tags
• Icon - Icon component with customizable size/color
• Masonry - Masonry grid layout
• ThemeToggle - Dark/light mode toggle
• CodeBlock - Syntax-highlighted code display
• CodeBlockSpeed - High-performance code block
• CodeEditor - Interactive code editor

Not Yet Implemented

• Advanced
  • Editor - Full-featured text editor
  • Terminal - Terminal emulator component
• General
  • Localization - Multi-language support
  • Theming - Advanced theming system
  • Specifying Iconsets - Custom icon set configuration using iconify
• Data
  • DataView - Alternative data display format
  • VirtualScroller - Virtual scrolling for large lists
  • FilterService - Data filtering utilities
  • FullCalendar - Full calendar view
  • OrderList - Draggable ordered list
  • OrganizationChart - Organizational hierarchy chart
  • Paginator - Pagination controls
  • PickList - Dual-list picker
  • TreeTable - Tree with table structure
• Overlay
  • ConfirmDialog - Confirmation dialog
  • ConfirmPopup - Confirmation popup
  • Dialog - Generic dialog
  • DynamicDialog - Dynamically created dialogs
  • OverlayPanel - Overlay panel
• File
  • Upload - Advanced file upload
• Menu
  • ContextMenu - Right-click context menu
  • MegaMenu - Large dropdown menu
  • Menubar - Top menu bar
  • PanelMenu - Side panel menu
  • Steps - Step indicator menu
  • TabMenu - Tab-based menu
  • TieredMenu - Multi-level menu
  • Dock - Dock menu
• Chart
  • Pie - Pie chart
  • Doughnut - Doughnut chart
  • Bar - Bar chart
  • Line - Line chart
  • PolarArea - Polar area chart
  • Radar - Radar chart
  • Combo - Combination chart
• Media
  • Image - Image component with lazy loading
  • Galleria - Image gallery