Smilodon

High-Performance Select Components

Experience Smilodon

Interactive playground to test all features across frameworks

Choose Your Framework

Beautiful with CSS Frameworks

Smilodon stays in sync with modern styling systems. Use host classes for layout, CSS variables for shell theming, `classMap` for state styling, and custom renderers for rich option content.

Supported

Tailwind CSS

Use utility classes on the host, drive selected and active states with `classMap`, and style rich options with `optionRenderer`.

dark variants classMap custom renderers
Supported

Bootstrap

Pair Bootstrap layout and spacing utilities with Smilodon tokens for a select that feels native to your form system.

form layouts tokens ::part()
Supported

Material UI

Use `GlobalStyles`, theme variables, and wrapper components while Smilodon preserves behavior and internal structure.

GlobalStyles theme sync React
First-class

Raw CSS / CSS Modules

Reach everything through CSS custom properties, host selectors, and shadow parts when you want exact design-system control.

CSS variables host classes shadow parts

Interactive Playground

Current Configuration

Performance Metrics

Render Time: -
Items Rendered: -
Total Items: -

Style Customization

More than the basics. This panel now exposes a broader set of option-level styles, but the full Smilodon token surface is still available through the generated CSS below.

Applied Select Output

The generated CSS stays scoped to the Smilodon demo select, covers a broader set of option styles, and remains compatible with light and dark themes.

Light Mode
Dark Mode