The New CSS

Addons

Addons extend The New CSS with components and utilities that go beyond the core library. Each addon is a standalone npm package you can install individually — pick only what you need.

The core library stays under 5KB gzipped. Addons let you add buttons, cards, tables, and more without bloating the base bundle.

Installation

Install any addon via npm or load it from a CDN. Each addon works alongside the core library and uses the same design tokens.

npm install @thenewcss/buttons @thenewcss/cards

Components

Pre-built UI components styled with the core design tokens.

Buttons

~3KB

A complete button component system with sizes, colors, outline/ghost/link styles, loading states with spinner animation, and button groups.

.btn.btn-primary.btn-outline.btn-ghost.btn-loading.btn-group

Badges

~2KB

Pill-shaped badges and rectangular tags for status indicators, labels, and categorization. Includes color variants, outline/dot styles, and tag lists.

.badge.badge-primary.badge-outline.badge-dot.tag.tag-list

Cards

~2KB

Flexible card components with header, body, footer, and image sections. Includes hover effects, horizontal layout, compact mode, and padding modifiers.

.card.card-header.card-body.card-hover.card-horizontal.card-flat

Tables

~2KB

Styled table components with striped rows, hover highlights, bordered cells, compact mode, fixed layout, responsive wrapper, and cell alignment utilities.

.table.table-striped.table-hover.table-bordered.table-responsive.cell-truncate

Forms

~4KB

Styled form controls with custom inputs, selects, checkboxes, radios, switches, range sliders, input groups, floating labels, validation states, and size variants.

.form-control.form-select.form-check.form-switch.input-group.form-floating

Alerts

~2KB

Alert boxes with info, success, warning, and danger color variants. Includes a reusable close button and dismissible alert pattern.

.alert.alert-info.alert-success.alert-warning.alert-danger.btn-close

Navigation

~4KB

Navbar, nav tabs, nav pills, breadcrumbs, and pagination in one package. CSS-only mobile toggle using details/summary.

.navbar.nav-tabs.nav-pills.breadcrumb.pagination.page-link

List Group

~2KB

List group component with actionable items, flush variant, numbered lists, and color variants for primary, success, warning, and danger states.

.list-group.list-group-item.list-group-item-action.list-group-flush.list-group-numbered

Progress

~3KB

Progress bars with striped and animated variants, border and grow spinners, and placeholder skeleton loaders with glow and wave animations.

.progress-bar.progress-bar-striped.spinner-border.spinner-grow.placeholder.placeholder-wave

Accordion

~2KB

CSS-only accordion using native details/summary elements. Custom chevron indicator, smooth transitions, flush variant, and exclusive mode via HTML name attribute.

.accordion.accordion-item.accordion-header.accordion-body.accordion-flush

Modal

~3KB

Modal dialogs and offcanvas panels using native dialog element. Built-in backdrop, focus trap, Escape key, and size variants including fullscreen.

.modal.modal-header.modal-body.modal-footer.offcanvas.offcanvas-start

Utilities

Extended design tokens, utility classes for colors and typography, and miscellaneous helpers.

All Addons

PackageDescriptionSize
@thenewcss/buttonsButtons with sizes, colors, and states~3KB
@thenewcss/badgesBadges, tags, and status indicators~2KB
@thenewcss/cardsCards with sections, effects, and layouts~2KB
@thenewcss/tablesStyled tables with variants and cell utilities~2KB
@thenewcss/colors-extended13 color palettes with utility classes~15KB
@thenewcss/typography-extendedDisplay sizes, prose formatting, gradient text~5KB
@thenewcss/formsStyled inputs, selects, checkboxes, and validation~4KB
@thenewcss/alertsAlert boxes with color variants and close button~2KB
@thenewcss/navigationNavbar, tabs, pills, breadcrumbs, and pagination~4KB
@thenewcss/list-groupList groups with actions and color variants~2KB
@thenewcss/progressProgress bars, spinners, and skeleton loaders~3KB
@thenewcss/accordionCSS-only collapsible accordion panels~2KB
@thenewcss/modalModal dialogs and offcanvas slide-in panels~3KB
@thenewcss/helpersClearfix, ratios, stacks, object-fit, and more~2KB