Learn how to style and customize the Nile Auth components
@niledatabase/react
package.
They are built with Tailwind CSS and React and are designed to be easily customized.
There are a few ways to customize the components, and the best approach depends on how much customization you need.
In this document we will cover the different approaches and provide examples of how to customize the components.
You will find more details in the documentation for the specific component you are using.
<SignOutButton>
, <CreateTenant>
and
all the social login buttons.
These components can be customized using the className
prop. For example, if you want your signout button to have a different color, you can do the following:
<SignInForm>
, <SignUpForm>
, <UserProfile>
and <TenantSelector>
components,
include child components and text. They can still be customized using the className
prop, to an extent - for example you can add margins to the form by adding a className
to the component.
But it isn’t the best approach for achieving a specific design.
buttonText
prop that can be used to change the text of the button.
Check the documentation for the specific component for more details.globals.css
file:
:root
selector in the globals.css
file. You can use shadcn theme generator to get
a nice theme for your app. In the example below, I picked a purple theme.useSignIn
hook to sign in a user and the beforeMutate
option to add an extra parameter to the sign in request.
Note how customizable the hook is - you can add extra parameters, handle the success and error cases, and redirect the user after login.
Individual component pages also include the relevant hooks and code snippets you need to use the component in your own code.