Button
Eight variants, six sizes and full composition through asChild.
Beautiful components. Entirely yours.
Own your interface.Shape every detail.
Rivelle is an open-source registry of 55 foundations and 11 expressive effects for teams who care about craft, speed and complete control.
rivelle / button.tsx
import { Button } from
"@/components/ui/button"
export default function Page() {
return (
<Button variant="outline">
Create something
</Button>
)
}
Rivelle Effects
Explore 11 effects The foundation is quiet. The moments can be unforgettable.
Pointer-aware surfaces, kinetic type and atmospheric scenes that install as editable source and inherit the same semantic theme.
Bend the spectrum.
Source, not a dependency
Every component lands in your codebase. Read it, reshape it, make it unmistakably yours.
Server-first by default
No client boundary unless interaction truly needs one. Built for modern Next.js applications.
Quietly expressive
Purposeful motion, tactile states and strong defaults without visual noise.
The collection
55 components · 11 effects · 14 blocks · 2 templatesSmall pieces. Serious polish.
Accessible primitives with elegant defaults, designed to be composed and changed.
Badge
Compact signals for status, categories and metadata.
NewIn progress ReadyDraft
Form controls
Calm, legible fields with refined focus and invalid states.
Switch & separator
Accessible Radix interactions with a tactile, responsive feel.
Product updates
A thoughtful note, occasionally.
Usage insights
Weekly performance digest.
Card
Composable structure for products, settings, dashboards and editorial layouts.
Active
Launch faster, stay in control.
Start with a considered foundation and change every detail as your product evolves.
Source included
Ready when you are
One command. Your code.
Initialize the tokens, add only what you need, then build without fighting someone else's abstraction.
React · Next.js · Tailwind CSS v4 · TypeScript