NEO MeTRO CITY
_
$npm i neo-metro-city@latest
#HOW TO INSTALL
0. You need Node.js and Tailwind CSS installed.
1. Install Neo Metro City as a Node package
Terminal
npm i -D neo-metro-city@latest
2. Sync Neo Metro City into Your App.
app.css
@import "tailwindcss";
@plugin "neo-metro-city";
install tutorials for Frameworks
Vite
React
Vue
Ruby on Rails
Laravel
django
#20Components

accordion
Accordions organize content into expandable sections, like unfolding secret panels in a futuristic building.

alert
Alerts grab user attention with important information, flashing like warning signals in the neon cityscape.

badge
Badges display system statuses or classifications, glowing like security tags or access codes pulsing within Neo Metro City's digital grid.

button
Buttons let users perform actions in the interface. In Neo Metro City, they serve as clear and responsive elements designed for fast interactions.

checkbox
Checkboxes allow users to select options, toggling features on and off like activating systems on a neon dashboard.

drawer
Side drawers slide from the edge to reveal hidden navigation panels, like secret alleys opening in Neo Metro City.

dropdown
Dropdowns reveal a list of options when activated, just like pulling a hidden neon panel from a high-tech wall in Neo Metro City.

field set
Fieldsets group related inputs under a glowing perimeter, forming structured data clusters like access panels in the city’s control grid.

input field
Input fields capture user input efficiently, styled like entering commands into a glowing console.

list
Lists display items clearly and stylishly, like digital signboards showcasing important notices in Neo Metro City.

loading
Loading indicators visualize background processes, styled like pulsing signals on a neon console during a MetroNet uplink.

modal
Modals are like neon popups in the cityscape, focusing user attention on a single task or message without leaving the current page.

progress
Progress indicators visualize ongoing processes or statuses. In Neo Metro City, they pulse like neon veins running through the city, signaling progress with vibrant, rhythmic energy.

radio
Radio buttons allow users to pick one option from a set, perfect for making singular decisions with futuristic flair.

select
Fieldsets group related inputs under a glowing perimeter, forming structured data clusters like access panels in the city’s control grid.

status
Status indicators show real-time system conditions with glowing signals—pulsing like heartbeat LEDs wired into Neo Metro City's neural infrastructure.

swap
Swap lets you toggle between two elements, like flipping a switch in the neon-lit streets of Neo Metro City—perfect for interactive states and quick visual changes.

tab
Tabs separate content into panels, like different levels of a neon skyscraper, letting users move between them easily.

textarea
Textareas allow users to input longer messages or logs, styled like streaming data into a glowing terminal deep within the city's core network.

toggle
Toggles switch a setting on and off, evoking the feeling of activating cybernetic implants.
#0Contributors