'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Start here
- Get started This page — first tasks, the install steps and the map.
- Make it yours Four questions that seed scale, brand, shape and density at once.
- Learn ↗ Skeleton’s own design documentation, opened in a new tab.
Skeleton v5
Get started
Make a theme, put it in your app, and keep Figma in step. Everything on this page refers to the theme you have open, Untitled Skeleton theme.
Where to go next
Pick a first task
Make the theme yoursFour questions seed scale, brand, shape and density at once. Find the class for something you are buildingAnswer three questions and get one native utility with its light–dark pair. Put the theme in your appLet every publish open a pull request in your repository, or copy the CSS file. Hand it to FigmaPublish, install with the Skeleton Themes plugin, update after every publish.
Ship it
Install Untitled Skeleton theme in a SvelteKit app
Choose how the theme file gets into your repository. Automatic keeps it current: every version you publish arrives as a pull request. Manual is the quickest first try: copy the file as the canvas shows it now, and copy it again after a change.
Install Skeleton
Both packages: the core styles and the Svelte components. Tailwind CSS 4 is assumed.
npm i -D @skeletonlabs/skeleton @skeletonlabs/skeleton-svelteConnect a repository and publish
Every version you publish opens a pull request that writes src/design-system/untitled-skeleton-theme.css. A version is frozen when you publish it, so later edits reach the repository with the next publish.
- Repository
- Sign in and save the theme to connect one
- Published version
- None yet
Register it in src/routes/layout.css
Skeleton and the components first, then your theme. The path is relative to the stylesheet.
@import 'tailwindcss'; @import '@skeletonlabs/skeleton'; @import '@skeletonlabs/skeleton-svelte'; @import '../design-system/untitled-skeleton-theme.css';Activate it in src/app.html
The attribute value is the file’s selector. Light and dark follow the element’s color-scheme, so a theme switcher changes this attribute and a mode switcher changes the scheme.
Dark mode strategies on skeleton.dev ↗<html data-theme="untitled-skeleton-theme">Merge each pull request
Each publish opens “Publish Untitled Skeleton theme <version>” in your repository. Merging it ships the new theme to your app. The same publish offers the version to the Skeleton Themes plugin in Figma, where you apply the update.
The workspace
What each area holds
The system
- Colors Seven ramps, their light–dark pairs, and which one to reach for.
- Typography The type scale and the Base, Heading and Anchor foundations.
- Spacing One base unit behind every padding, gap and margin utility.
- Shape Two radii, corner character, and the border, ring and outline widths.
- Icons Lucide icons sized and colored with Skeleton variables.
- Components ↗ Skeleton’s Tailwind components, documented on skeleton.dev.
Keep and ship
- Figma Install the published theme in Figma and keep it updated.
- Themes Your saved themes, their versions, and the community gallery.
- Token reference Every variable of the open theme as text, plus the CSS file.