Prijstabellenblokken
Duidelijke prijstabellen om je plannen te tonen. Kant-en-klare React UI-blokken met een neobrutalistische look — heroes, pricing, auth, dashboards en meer. Bekijk ze op elk schermformaat, kopieer de code of installeer via je AI-agent en onze MCP-server. Werkt met Radix UI, Base UI en React Aria.
- Hero's, prijzen & auth
- Elk breekpunt vooraf bekijken
- Kopieer de brontekst
- MCP klaar voor installatie
- Radix · Base UI · React Aria
- 158 kant-en-klare blokken
- Paginadelen die worden geleverd
- Dashboards en marketing
- Pro ontgrendelt de code
- Drop-in-indelingen
Bekijk elk ontwerp
Prijstabellen
11 blokken — open een willekeurige kaart voor een volledig schermvoorbeeld, de code en installatiesstappen.
- 01Pro
Kleurgecodeerde prijstiers
Drie tiers, elk met een eigen kleurband, een schakelaar maandelijks-jaarlijks en ingebedde functiepanelen. React en Tailwind, banden per plan aanpasbaar.
- 02Pro
Bento met e-mailregistratie
De helft van de rij gaat naar een e-mailregistratiepaneel voor een gratis proefperiode, met twee compacte plankaarten ernaast op een merkkleurige canvas.
- 03Pro
Functievergelijkingstabel
Een echte HTML-tabel: vier abonnementen tegenover negen functierijen, elke cel een waarde, vinkje of kruisje. React en Tailwind: rij en keys toevoegen.
- 04Pro
Vierkoloms prijstabel
Vier abonnementen in één omrande plaat door interne lijnen, met de aanbevolen kolom los van de bovenrand. React en Tailwind: markeer één abonnement.
- 05Pro
Gratis proefselector
De stap na de prijspagina: twee abonnementen als radiogroep op een merkpaneel, boven de kleine lettertjes. React en Tailwind: plaats het in de checkout.
- 06Pro
Prijskaarten met illustratie
Elk abonnement opent met een brede illustratie van de doelgroep, en de aanbevolen kaart staat los van de rij. React en Tailwind: eigen illustraties.
- 07Pro
Prijskaarten met kernfuncties
Kaarten die limieten scheiden van kernfuncties, op een omgekeerde donkere band met een schuivende jaartoggle. React en Tailwind: vul beide prijsvelden in.
- 08Pro
Maand/jaar prijsswitch
Eén switch verandert elke prijs naar tien maanden jaarfacturering, boven omgekeerde priceheaders en een diagonaal lint. React en Tailwind: reken na.
- 09Pro
Template vs. maatwerkprijzen
Kopen of laten bouwen, niet welk niveau: een template met vaste startprijs naast een maatwerkoplossing vanaf een bedrag. React en Tailwind: plan de call.
- 10Pro
Drieledige prijzen met FAQ
Een gevulde, belinte Pro-kaart in het midden, met daaronder een FAQ-paneel dat vier prijsbezwaren beantwoordt. React en Tailwind: bewerk de faqs-array.
- 11Pro
Twee abonnementen vergelijken
Precies twee abonnementen delen één gesegmenteerde facturatietoggle, de pro-kaart op het accentoppervlak. React en Tailwind: hernoem de niveaus.