Una sección de precios: planes en marcos concéntricos con el precio junto a una acción, las características abajo y una fila ancha para pedidos a la medida.
Pricing
The right fit for your next project
Landing page
One page that says what you do, shows your work and turns a visit into a message.
Q 2,800+
- One page
- Design and development
- Built for every screen
- Fast and easy to find
Full website
Most popularA complete site that grows with your business, with every page you need and a way to edit them.
Q 7,000+
- As many pages as you need
- Design and development
- Built for every screen
- Fast and easy to find
Something else
Need something different? From design and code to search and automation, we’ll find the right fit.
Instalación
Agrégalo con el CLI de shadcn o copia el código a mano.
$ pnpm dlx shadcn@latest add @ssntl/pricingReferencia de API
Pricing
eyebrow?Tipo:React.ReactNodePor defecto:—titleobligatorioTipo:React.ReactNodePor defecto:—
También acepta todos los props de <section>.
PricingPlan
nameobligatorioTipo:React.ReactNodePor defecto:—badge?Tipo:React.ReactNodeA Tag beside the name, like “Most popular”. One plan at most.Por defecto:—descriptionobligatorioTipo:React.ReactNodePor defecto:—priceobligatorioTipo:React.ReactNodeThe price as people read it: “Q 2,800+”, “$49 / month”.Por defecto:—actionobligatorioTipo:React.ReactNodePor defecto:—featuresobligatorioTipo:{ icon?: React.ReactNode; label: React.ReactNode }[]Por defecto:—
También acepta todos los props de <article>.
PricingCustom
titleobligatorioTipo:React.ReactNodePor defecto:—descriptionobligatorioTipo:React.ReactNodePor defecto:—actionobligatorioTipo:React.ReactNodePor defecto:—
También acepta todos los props de <article>.
Reglas
Lo que este componente espera de ti, tal como se instala en components/blocks/pricing.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).
## Reglas de Pricing
- **Marcos concéntricos.** Cada plan es un marco neutro con 4px de separación alrededor de dos tarjetas, así sus esquinas son los 32px del marco menos la separación.
- **Tono, no líneas.** Las tarjetas son más claras que su marco (más oscuras en modo oscuro), así un plan se lee como un solo objeto sin borde.
- El precio junto a su única acción y las características abajo: primero se comparan precios, luego se confirma con la lista.
- Los precios usan números tabulares y dicen lo que significan: “Q 2,800+” para un precio desde, “/ mes” para una suscripción.
- Como mucho una insignia “Más elegido”, como Tag tint con palabras, nunca solo color.
- Los planes van lado a lado desde 320px cada uno y se apilan debajo; la fila a la medida siempre ocupa todo el ancho.