S Svelora

Getting Started

Build beautiful UIs with Svelora

A modern, accessible UI component library built natively for Svelte 5 and Tailwind CSS 4. Ship faster with 89+ production-ready components.

Installation Browse Components

Quick Start

Install and start using Svelora in two steps.

1. Install the package
npm install svelora
2. Use components
<script lang="ts">
 import { Button, Card, Badge } from 'svelora';
</script>

<Card>
 <h3>Welcome</h3>
 <p>Build beautiful UIs with Svelte 5.</p>

 <div class="flex gap-2">
  <Button label="Get Started" color="primary" />
  <Badge label="v3.2.8" variant="soft" color="success" />
 </div>
</Card>
3. Enable MCP for Cursor
svelora-mcp-install-template

Installs a ready-to-use `.cursor/mcp.json` so Cursor can access Svelora docs tools immediately.

Components

89+ components across 8 categories.

General

9
Button CodeBlock FieldGroup Fonts Icon Link LocaleButton Kbd ThemeModeButton

Layout

13
BentoGrid Card Container Error Footer Header Main Resizable Modal Navigation Menu Scroll Area Search Separator

Data Display

16
Accordion Chart Avatar AvatarGroup Badge Carousel Chip List NumberTicker Prose Empty Skeleton Timeline User Table TreeView

Forms

22
Checkbox ColorPicker CheckboxGroup Editor Input InputNumber InputTags RadioGroup Select SelectMenu Slider SortableList Switch Toggle ToggleGroup Textarea PasswordInput FileUpload PinInput Rating FormField Form

Feedback

7
Alert Banner Chat Marquee Progress Toast Spotlight

Navigation

5
Breadcrumb Pagination Sidebar Stepper Tabs

Overlay

12
Collapsible Command ContextMenu Modal Lightbox Confirm Dialog Drawer DropdownMenu Popover Slideover Tooltip Tour

Date & Time

5
Calendar RangeCalendar DatePicker DateRangePicker TimeField

Hooks

Utility hooks for common interactions and reactive patterns.

useMediaQuery useClipboard useFormField useClickOutside useSortable useDragDrop useInfiniteScroll useEscapeKeydown useDebounce useDebouncedState useEventListener useResizeObserver / useElementSize useIntersectionObserver useScrollLock useFocusTrap useLocalStorage useThrottle useTour useTimeout / useInterval

Built With

Powered by the modern Svelte ecosystem.

Svelte 5

Runes & snippets

Tailwind 4

Utility-first CSS

bits-ui

Headless primitives

TypeScript

Full type safety

Installation Theming Dark Mode MCP Drag & Drop Customization Colors