NEO MeTRO CITY

_

Sync into the 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

file_type_vue

Vue

Ruby on Rails

Laravel

django

#20Components

accordion_component

accordion

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

alert_component

alert

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

badge_component

badge

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

button_component

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_component

checkbox

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

drawer_component

drawer

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

dropdown_component

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_component

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_component

input field

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

list_component

list

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

loading_component

loading

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

modal_component

modal

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

progress_component

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_component

radio

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

select_component

select

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

status_component

status

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

swap_component

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_component

tab

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

textarea_component

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_component

toggle

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

#0Contributors

MENU