ThemeRoller
-
Base
DownloadEdit -
UI lightness
DownloadEdit -
UI darkness
DownloadEdit -
Smoothness
DownloadEdit -
Start
DownloadEdit -
Redmond
DownloadEdit -
Sunny
DownloadEdit -
Overcast
DownloadEdit -
Le Frog
DownloadEdit -
Flick
DownloadEdit -
Pepper Grinder
DownloadEdit -
Eggplant
DownloadEdit -
Dark Hive
DownloadEdit -
Cupertino
DownloadEdit -
South Street
DownloadEdit -
Blitzer
DownloadEdit -
Humanity
DownloadEdit -
Hot Sneaks
DownloadEdit -
Excite Bike
DownloadEdit -
Vader
DownloadEdit -
Dot Luv
DownloadEdit -
Mint Choc
DownloadEdit -
Black Tie
DownloadEdit -
Trontastic
DownloadEdit -
Swanky Purse
DownloadEdit
Using ThemeRoller
ThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects. To create a custom theme, select the Roll your own tab and tweak the settings. As you work, the UI components to the right will update to reflect your design and you can download your theme whenever you like.
If you'd like to use a pre-designed theme, select the Theme Gallery tab and choose from one of the themes in the gallery. You can choose to download or customize any theme from there. To save a theme for later, simply bookmark or copy the URL.
Plugin Developers
jQuery UI is driven by a powerful custom CSS framework. The framework is designed to be used not only for our own jQuery UI components, but for custom UI widget development as well! Visit the jQuery UI documentation to learn more about the new jQuery UI CSS Framework.
Accordion
First
Second
Third
Autocomplete
Button
Checkboxradio
Controlgroup
Tabs
Dialog
Overlay and Shadow Classes
Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat.
Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.
Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.
Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam.
Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.
Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi.
Framework Icons (content color preview)
Slider
Datepicker
Progressbar
Selectmenu
MediumSpinner
Menu
- Item 1
- Item 2
- Item 3
- Item 3-1
- Item 3-2
- Item 3-3
- Item 3-4
- Item 3-5
- Item 4
- Item 5
Tooltip
Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
Highlight / Error
Hey! Sample ui-state-highlight style.
Alert: Sample ui-state-error style.